From 3a2968ed66be7751e14d0ccfaf34259b69a18170 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 1 Aug 2023 17:25:18 +0800
Subject: [PATCH 01/57] fix: styles.affixWrapper didn't work (#44)

---
 src/BaseInput.tsx        |  5 ++++-
 tests/BaseInput.test.tsx | 29 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index f183df7..e1ed697 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -116,7 +116,10 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     element = (
       <AffixWrapperComponent
         className={affixWrapperCls}
-        style={!hasAddon(props) ? style : undefined}
+        style={{
+          ...(!hasAddon(props) ? style : undefined),
+          ...styles?.affixWrapper,
+        }}
         hidden={!hasAddon(props) && hidden}
         onClick={onInputClick}
         {...dataAttrs?.affixWrapper}
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index cc36272..3512eaf 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -208,4 +208,33 @@ describe('BaseInput', () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('styles should work', () => {
+    const container = render(
+      <BaseInput
+        prefixCls="rc-input"
+        prefix="prefix"
+        addonBefore="addon"
+        inputElement={<input />}
+        styles={{
+          affixWrapper: {
+            color: 'red',
+          },
+          prefix: {
+            color: 'blue',
+          },
+        }}
+      />,
+    );
+
+    expect(
+      container.container.querySelector<HTMLSpanElement>(
+        '.rc-input-affix-wrapper',
+      )?.style.color,
+    ).toBe('red');
+    expect(
+      container.container.querySelector<HTMLSpanElement>('.rc-input-prefix')
+        ?.style.color,
+    ).toBe('blue');
+  });
 });

From 13a5a282e71a4e059e14fe8c366208669dd46841 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 1 Aug 2023 17:31:28 +0800
Subject: [PATCH 02/57] v1.1.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6c8eedb..669ebc3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React input component",
   "keywords": [
     "react",

From 5d992c995ad0d4d7bd0aa15779a435b35d6d8586 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 19 Sep 2023 15:16:54 +0800
Subject: [PATCH 03/57] chore: add value type (#46)

---
 src/Input.tsx        | 39 ++++++++++++++++++++++-----------------
 src/interface.ts     | 10 ++++++++--
 tests/index.test.tsx |  4 ++++
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 075ae05..6a164aa 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -110,23 +110,28 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
 
   const getInputElement = () => {
     // Fix https://fb.me/react-unknown-prop
-    const otherProps = omit(props as InputProps, [
-      'prefixCls',
-      'onPressEnter',
-      'addonBefore',
-      'addonAfter',
-      'prefix',
-      'suffix',
-      'allowClear',
-      // Input elements must be either controlled or uncontrolled,
-      // specify either the value prop, or the defaultValue prop, but not both.
-      'defaultValue',
-      'showCount',
-      'classes',
-      'htmlSize',
-      'styles',
-      'classNames',
-    ]);
+    const otherProps = omit(
+      props as Omit<InputProps, 'value'> & {
+        value?: React.InputHTMLAttributes<HTMLInputElement>['value'];
+      },
+      [
+        'prefixCls',
+        'onPressEnter',
+        'addonBefore',
+        'addonAfter',
+        'prefix',
+        'suffix',
+        'allowClear',
+        // Input elements must be either controlled or uncontrolled,
+        // specify either the value prop, or the defaultValue prop, but not both.
+        'defaultValue',
+        'showCount',
+        'classes',
+        'htmlSize',
+        'styles',
+        'classNames',
+      ],
+    );
     return (
       <input
         autoComplete={autoComplete}
diff --git a/src/interface.ts b/src/interface.ts
index 77abf56..f7dac5c 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -35,8 +35,10 @@ export interface CommonInputProps {
 
 type DataAttr = Record<`data-${string}`, string>;
 
+export type ValueType = InputHTMLAttributes<HTMLInputElement>['value'] | bigint;
+
 export interface BaseInputProps extends CommonInputProps {
-  value?: InputHTMLAttributes<HTMLInputElement>['value'];
+  value?: ValueType;
   inputElement: ReactElement;
   prefixCls?: string;
   className?: string;
@@ -68,7 +70,11 @@ export interface ShowCountProps {
 
 export interface InputProps
   extends CommonInputProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+    Omit<
+      InputHTMLAttributes<HTMLInputElement>,
+      'size' | 'prefix' | 'type' | 'value'
+    > {
+  value?: ValueType;
   prefixCls?: string;
   // ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types
   type?: LiteralUnion<
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 33d4322..060c608 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -75,6 +75,10 @@ describe('Input', () => {
     await user.click(container.querySelector('.rc-input-clear-icon')!);
     expect(document.activeElement).toBe(container.querySelector('input'));
   });
+
+  it('support bigint type', () => {
+    expect(<Input value={BigInt('2222')} />).toBeTruthy();
+  });
 });
 
 describe('should support showCount', () => {

From 1b8e8ca07b1b7f3699195bb398cc8248c68926aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 19 Sep 2023 15:18:19 +0800
Subject: [PATCH 04/57] 1.2.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 669ebc3..749a893 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "React input component",
   "keywords": [
     "react",

From aa08e91ce278103f3d0b5d1642ee541fe87e7ad2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 19 Sep 2023 15:27:46 +0800
Subject: [PATCH 05/57] 1.2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 749a893..aeb89af 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "React input component",
   "keywords": [
     "react",

From f13590028f7d2d32efb8f2e33e669cdde40f945a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 15:10:05 +0800
Subject: [PATCH 06/57] feat: add `count` for customize count logic (#47)

* chore: init of len

* chore: support len of demo

* feat: support cuter

* test: add test case

* test: use rc-test

* test: update snapshot

* test: add test case

* chore: clean up
---
 assets/index.less                       |  4 ++
 docs/examples/show-count.tsx            | 63 ++++++++++++++++-
 package.json                            |  8 +--
 src/Input.tsx                           | 90 ++++++++++++++++++-------
 src/hooks/useCount.ts                   | 48 +++++++++++++
 src/interface.ts                        | 31 +++++++--
 src/utils/commonUtils.ts                |  9 +--
 tests/__snapshots__/index.test.tsx.snap |  2 +-
 tests/count.test.tsx                    | 80 ++++++++++++++++++++++
 tests/index.test.tsx                    | 29 --------
 tsconfig.json                           |  2 +-
 11 files changed, 291 insertions(+), 75 deletions(-)
 create mode 100644 src/hooks/useCount.ts
 create mode 100644 tests/count.test.tsx

diff --git a/assets/index.less b/assets/index.less
index f916507..adab276 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -1,4 +1,8 @@
 .rc-input {
+  &-out-of-range {
+    color: red;
+  }
+
   &-affix-wrapper {
     padding: 2px 8px;
     overflow: hidden;
diff --git a/docs/examples/show-count.tsx b/docs/examples/show-count.tsx
index 42d590e..91be3a2 100644
--- a/docs/examples/show-count.tsx
+++ b/docs/examples/show-count.tsx
@@ -1,10 +1,69 @@
+import Input from 'rc-input';
 import type { FC } from 'react';
 import React from 'react';
 import '../../assets/index.less';
-import Input from 'rc-input';
+
+const sharedHeadStyle: React.CSSProperties = {
+  margin: 0,
+  padding: 0,
+};
 
 const Demo: FC = () => {
-  return <Input prefixCls="rc-input" showCount />;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        alignItems: 'start',
+      }}
+    >
+      <h3 style={sharedHeadStyle}>Native</h3>
+      <Input prefixCls="rc-input" showCount defaultValue="👨‍👩‍👧‍👦" />
+      <Input prefixCls="rc-input" showCount defaultValue="👨‍👩‍👧‍👦" maxLength={20} />
+      <h3 style={sharedHeadStyle}>Count</h3>
+      <h4 style={sharedHeadStyle}>Only Max</h4>
+      <Input
+        placeholder="count.max"
+        prefixCls="rc-input"
+        defaultValue="🔥"
+        count={{
+          show: true,
+          max: 5,
+        }}
+      />
+      <h4 style={sharedHeadStyle}>Customize strategy</h4>
+      <Input
+        placeholder="Emoji count 1"
+        prefixCls="rc-input"
+        defaultValue="🔥"
+        count={{
+          show: true,
+          max: 5,
+          strategy: (val) =>
+            [...new (Intl as any).Segmenter().segment(val)].length,
+        }}
+      />
+      <h4 style={sharedHeadStyle}>Customize exceedFormatter</h4>
+      <Input
+        placeholder="Emoji count 1"
+        prefixCls="rc-input"
+        defaultValue="🔥"
+        count={{
+          show: true,
+          max: 5,
+          exceedFormatter: (val, { max }) => {
+            const segments = [...new (Intl as any).Segmenter().segment(val)];
+
+            return segments
+              .filter((seg) => seg.index + seg.segment.length <= max)
+              .map((seg) => seg.segment)
+              .join('');
+          },
+        }}
+      />
+    </div>
+  );
 };
 
 export default Demo;
diff --git a/package.json b/package.json
index aeb89af..71d25f2 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,8 @@
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "pretty-quick": "pretty-quick",
     "lint-staged": "lint-staged",
-    "test": "umi-test test",
-    "coverage": "father test --coverage",
+    "test": "rc-test",
+    "coverage": "rc-test --coverage",
     "prepare": "husky install"
   },
   "dependencies": {
@@ -69,10 +69,10 @@
     "np": "^7.0.0",
     "prettier": "^2.0.5",
     "pretty-quick": "^3.0.0",
+    "rc-test": "^7.0.15",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "^4.0.5",
-    "umi-test": "^1.9.7"
+    "typescript": "^4.0.5"
   },
   "peerDependencies": {
     "react": ">=16.0.0",
diff --git a/src/Input.tsx b/src/Input.tsx
index 6a164aa..7351f4e 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -9,13 +9,10 @@ import React, {
   useState,
 } from 'react';
 import BaseInput from './BaseInput';
+import useCount from './hooks/useCount';
 import type { InputProps, InputRef } from './interface';
 import type { InputFocusOptions } from './utils/commonUtils';
-import {
-  fixControlledValue,
-  resolveOnChange,
-  triggerFocus,
-} from './utils/commonUtils';
+import { resolveOnChange, triggerFocus } from './utils/commonUtils';
 
 const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const {
@@ -32,6 +29,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     maxLength,
     suffix,
     showCount,
+    count,
     type = 'text',
     classes,
     classNames,
@@ -39,10 +37,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     ...rest
   } = props;
 
-  const [value, setValue] = useMergedState(props.defaultValue, {
-    value: props.value,
-  });
   const [focused, setFocused] = useState<boolean>(false);
+  const compositionRef = React.useRef(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -52,6 +48,21 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     }
   };
 
+  // ====================== Value =======================
+  const [value, setValue] = useMergedState(props.defaultValue, {
+    value: props.value,
+  });
+  const formatValue =
+    value === undefined || value === null ? '' : String(value);
+
+  // ====================== Count =======================
+  const countConfig = useCount(count, showCount);
+  const mergedMax = countConfig.max || maxLength;
+  const valueLength = countConfig.strategy(formatValue);
+
+  const isOutOfRange = !!mergedMax && valueLength > mergedMax;
+
+  // ======================= Ref ========================
   useImperativeHandle(ref, () => ({
     focus,
     blur: () => {
@@ -74,15 +85,40 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     setFocused((prev) => (prev && disabled ? false : prev));
   }, [disabled]);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (props.value === undefined) {
-      setValue(e.target.value);
+  const triggerChange = (
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.CompositionEvent<HTMLInputElement>,
+    currentValue: string,
+  ) => {
+    let cutValue = currentValue;
+
+    if (
+      !compositionRef.current &&
+      countConfig.exceedFormatter &&
+      countConfig.max &&
+      countConfig.strategy(currentValue) > countConfig.max
+    ) {
+      cutValue = countConfig.exceedFormatter(currentValue, {
+        max: countConfig.max,
+      });
     }
+    setValue(cutValue);
+
     if (inputRef.current) {
-      resolveOnChange(inputRef.current, e, onChange);
+      resolveOnChange(inputRef.current, e, onChange, cutValue);
     }
   };
 
+  const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    triggerChange(e, e.target.value);
+  };
+
+  const onCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>) => {
+    compositionRef.current = false;
+    triggerChange(e, e.currentTarget.value);
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (onPressEnter && e.key === 'Enter') {
       onPressEnter(e);
@@ -126,6 +162,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         // specify either the value prop, or the defaultValue prop, but not both.
         'defaultValue',
         'showCount',
+        'count',
         'classes',
         'htmlSize',
         'styles',
@@ -136,7 +173,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       <input
         autoComplete={autoComplete}
         {...otherProps}
-        onChange={handleChange}
+        onChange={onInternalChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
@@ -144,6 +181,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
           prefixCls,
           {
             [`${prefixCls}-disabled`]: disabled,
+            [`${prefixCls}-out-of-range`]: isOutOfRange,
           },
           classNames?.input,
         )}
@@ -151,25 +189,30 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         ref={inputRef}
         size={htmlSize}
         type={type}
+        onCompositionStart={() => {
+          compositionRef.current = true;
+        }}
+        onCompositionEnd={onCompositionEnd}
       />
     );
   };
 
   const getSuffix = () => {
     // Max length value
-    const hasMaxLength = Number(maxLength) > 0;
+    const hasMaxLength = Number(mergedMax) > 0;
 
-    if (suffix || showCount) {
-      const val = fixControlledValue(value);
-      const valueLength = [...val].length;
-      const dataCount =
-        typeof showCount === 'object'
-          ? showCount.formatter({ value: val, count: valueLength, maxLength })
-          : `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
+    if (suffix || countConfig.show) {
+      const dataCount = countConfig.showFormatter
+        ? countConfig.showFormatter({
+            value: formatValue,
+            count: valueLength,
+            maxLength: mergedMax,
+          })
+        : `${valueLength}${hasMaxLength ? ` / ${mergedMax}` : ''}`;
 
       return (
         <>
-          {!!showCount && (
+          {countConfig.show && (
             <span
               className={clsx(
                 `${prefixCls}-show-count-suffix`,
@@ -192,6 +235,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     return null;
   };
 
+  // ====================== Render ======================
   return (
     <BaseInput
       {...rest}
@@ -199,7 +243,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       className={className}
       inputElement={getInputElement()}
       handleReset={handleReset}
-      value={fixControlledValue(value)}
+      value={formatValue}
       focused={focused}
       triggerFocus={focus}
       suffix={getSuffix()}
diff --git a/src/hooks/useCount.ts b/src/hooks/useCount.ts
new file mode 100644
index 0000000..a2d4451
--- /dev/null
+++ b/src/hooks/useCount.ts
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import type { InputProps } from '..';
+import type { CountConfig, ShowCountFormatter } from '../interface';
+
+type ForcedCountConfig = Omit<CountConfig, 'show'> &
+  Pick<Required<CountConfig>, 'strategy'> & {
+    show: boolean;
+    showFormatter?: ShowCountFormatter;
+  };
+
+/**
+ * Cut `value` by the `count.max` prop.
+ */
+export function inCountRange(value: string, countConfig: ForcedCountConfig) {
+  if (!countConfig.max) {
+    return true;
+  }
+
+  const count = countConfig.strategy(value);
+  return count <= countConfig.max;
+}
+
+export default function useCount(
+  count?: CountConfig,
+  showCount?: InputProps['showCount'],
+) {
+  return React.useMemo<ForcedCountConfig>(() => {
+    let mergedConfig = count;
+
+    if (!count) {
+      mergedConfig = {
+        show:
+          typeof showCount === 'object' && showCount.formatter
+            ? showCount.formatter
+            : !!showCount,
+      };
+    }
+
+    const { show, ...rest } = mergedConfig!;
+
+    return {
+      ...rest,
+      show: !!show,
+      showFormatter: typeof show === 'function' ? show : undefined,
+      strategy: rest.strategy || ((value) => value.length),
+    };
+  }, [count, showCount]);
+}
diff --git a/src/interface.ts b/src/interface.ts
index f7dac5c..ecb4b7a 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -60,12 +60,23 @@ export interface BaseInputProps extends CommonInputProps {
   };
 }
 
-export interface ShowCountProps {
-  formatter: (args: {
-    value: string;
-    count: number;
-    maxLength?: number;
-  }) => ReactNode;
+export type ShowCountFormatter = (args: {
+  value: string;
+  count: number;
+  maxLength?: number;
+}) => ReactNode;
+
+export type ExceedFormatter = (
+  value: string,
+  config: { max: number },
+) => string;
+
+export interface CountConfig {
+  max?: number;
+  strategy?: (value: string) => number;
+  show?: boolean | ShowCountFormatter;
+  /** Trigger when content larger than the `max` limitation */
+  exceedFormatter?: ExceedFormatter;
 }
 
 export interface InputProps
@@ -103,7 +114,12 @@ export interface InputProps
     string
   >;
   onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
-  showCount?: boolean | ShowCountProps;
+  /** @deprecated Use `count` instead */
+  showCount?:
+    | boolean
+    | {
+        formatter: ShowCountFormatter;
+      };
   autoComplete?: string;
   htmlSize?: number;
   classNames?: CommonInputProps['classNames'] & {
@@ -114,6 +130,7 @@ export interface InputProps
     input?: CSSProperties;
     count?: CSSProperties;
   };
+  count?: CountConfig;
 }
 
 export interface InputRef {
diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts
index 1e492ca..a1a9e30 100644
--- a/src/utils/commonUtils.ts
+++ b/src/utils/commonUtils.ts
@@ -1,5 +1,5 @@
-import type { BaseInputProps, InputProps } from '../interface';
 import type React from 'react';
+import type { BaseInputProps, InputProps } from '../interface';
 
 export function hasAddon(props: BaseInputProps | InputProps) {
   return !!(props.addonBefore || props.addonAfter);
@@ -96,10 +96,3 @@ export function triggerFocus(
     }
   }
 }
-
-export function fixControlledValue<T>(value: T) {
-  if (typeof value === 'undefined' || value === null) {
-    return '';
-  }
-  return String(value);
-}
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
index 024b277..cb35b43 100644
--- a/tests/__snapshots__/index.test.tsx.snap
+++ b/tests/__snapshots__/index.test.tsx.snap
@@ -130,7 +130,7 @@ exports[`Input allowClear should change type when click 1`] = `
 exports[`Input allowClear should change type when click 2`] = `
 <div>
   <span
-    class="rc-input-affix-wrapper"
+    class="rc-input-affix-wrapper rc-input-affix-wrapper-focused"
   >
     <input
       class="rc-input"
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
new file mode 100644
index 0000000..9975b8f
--- /dev/null
+++ b/tests/count.test.tsx
@@ -0,0 +1,80 @@
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import Input from '../src';
+
+const getSegments = (val: string) => [
+  ...new (Intl as any).Segmenter().segment(val),
+];
+
+describe('Input.Count', () => {
+  it('basic emoji take length', () => {
+    const { container } = render(<Input count={{ show: true }} value="👨‍👩‍👧‍👦" />);
+    expect(
+      container.querySelector('.rc-input-show-count-suffix')?.textContent,
+    ).toEqual('11');
+  });
+
+  it('strategy', () => {
+    const { container } = render(
+      <Input
+        count={{ show: true, strategy: (val) => getSegments(val).length }}
+        value="👨‍👩‍👧‍👦"
+      />,
+    );
+    expect(
+      container.querySelector('.rc-input-show-count-suffix')?.textContent,
+    ).toEqual('1');
+  });
+
+  it('exceed style', () => {
+    const { container } = render(
+      <Input count={{ show: true, max: 5 }} value="👨‍👩‍👧‍👦" />,
+    );
+    expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+  });
+
+  it('show formatter', () => {
+    const { container } = render(
+      <Input
+        count={{
+          show: ({ value, count, maxLength }) =>
+            `${value}_${count}_${maxLength}`,
+        }}
+        value="👨‍👩‍👧‍👦"
+        maxLength={5}
+      />,
+    );
+    expect(
+      container.querySelector('.rc-input-show-count-suffix')?.textContent,
+    ).toEqual('👨‍👩‍👧‍👦_11_5');
+  });
+
+  it('exceedFormatter', () => {
+    const { container } = render(
+      <Input
+        count={{
+          show: true,
+          max: 3,
+          exceedFormatter: (val, { max }) =>
+            getSegments(val)
+              .filter((seg) => seg.index + seg.segment.length <= max)
+              .map((seg) => seg.segment)
+              .join(''),
+        }}
+      />,
+    );
+
+    // Allow input
+    fireEvent.compositionStart(container.querySelector('input')!);
+    fireEvent.change(container.querySelector('input')!, {
+      target: {
+        value: '🔥🔥🔥🔥🔥',
+      },
+    });
+    expect(container.querySelector('input')?.value).toEqual('🔥🔥🔥🔥🔥');
+
+    // Fallback
+    fireEvent.compositionEnd(container.querySelector('input')!);
+    expect(container.querySelector('input')?.value).toEqual('🔥');
+  });
+});
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 060c608..44a7bfa 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -102,35 +102,6 @@ describe('should support showCount', () => {
     ).toBe('8 / 5');
   });
 
-  describe('emoji', () => {
-    it('should minimize value between emoji length and maxLength', () => {
-      const { container } = render(
-        <Input prefixCls="rc-input" maxLength={1} showCount value="👀" />,
-      );
-      expect(container.querySelector('input')?.value).toBe('👀');
-      expect(
-        container.querySelector('.rc-input-show-count-suffix')?.innerHTML,
-      ).toBe('1 / 1');
-
-      const { container: container1 } = render(
-        <Input prefixCls="rc-input" maxLength={2} showCount value="👀" />,
-      );
-      expect(
-        container1.querySelector('.rc-input-show-count-suffix')?.innerHTML,
-      ).toBe('1 / 2');
-    });
-
-    it('slice emoji', () => {
-      const { container } = render(
-        <Input prefixCls="rc-input" maxLength={5} showCount value="1234😂" />,
-      );
-      expect(container.querySelector('input')?.value).toBe('1234😂');
-      expect(
-        container.querySelector('.rc-input-show-count-suffix')?.innerHTML,
-      ).toBe('5 / 5');
-    });
-  });
-
   it('count formatter', () => {
     const { container } = render(
       <Input
diff --git a/tsconfig.json b/tsconfig.json
index e352d2d..f8e6324 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,5 +18,5 @@
       "rc-input": ["src/index.tsx"]
     }
   },
-  "include": [".dumi/**/*", ".dumirc.ts", "**/*.ts", "**/*.tsx"]
+  "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]
 }

From 1938624fe3bc0a7b0f54c6beb9c252fbe2f4225f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 15:28:16 +0800
Subject: [PATCH 07/57] 1.3.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 71d25f2..3eb151c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React input component",
   "keywords": [
     "react",

From 93b77ba4f02574fd7e387d735000f7e019d64aaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 16:06:21 +0800
Subject: [PATCH 08/57] chore: adjust ts (#48)

---
 docs/examples/show-count.tsx | 5 ++---
 src/interface.ts             | 2 +-
 tests/count.test.tsx         | 4 +---
 tsconfig.json                | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/docs/examples/show-count.tsx b/docs/examples/show-count.tsx
index 91be3a2..8d1be49 100644
--- a/docs/examples/show-count.tsx
+++ b/docs/examples/show-count.tsx
@@ -40,8 +40,7 @@ const Demo: FC = () => {
         count={{
           show: true,
           max: 5,
-          strategy: (val) =>
-            [...new (Intl as any).Segmenter().segment(val)].length,
+          strategy: (val) => [...new Intl.Segmenter().segment(val)].length,
         }}
       />
       <h4 style={sharedHeadStyle}>Customize exceedFormatter</h4>
@@ -53,7 +52,7 @@ const Demo: FC = () => {
           show: true,
           max: 5,
           exceedFormatter: (val, { max }) => {
-            const segments = [...new (Intl as any).Segmenter().segment(val)];
+            const segments = [...new Intl.Segmenter().segment(val)];
 
             return segments
               .filter((seg) => seg.index + seg.segment.length <= max)
diff --git a/src/interface.ts b/src/interface.ts
index ecb4b7a..736bfaa 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -114,7 +114,7 @@ export interface InputProps
     string
   >;
   onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
-  /** @deprecated Use `count` instead */
+  /** @deprecated Use `count.show` instead */
   showCount?:
     | boolean
     | {
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index 9975b8f..2f3ca0e 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -2,9 +2,7 @@ import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import Input from '../src';
 
-const getSegments = (val: string) => [
-  ...new (Intl as any).Segmenter().segment(val),
-];
+const getSegments = (val: string) => [...new Intl.Segmenter().segment(val)];
 
 describe('Input.Count', () => {
   it('basic emoji take length', () => {
diff --git a/tsconfig.json b/tsconfig.json
index f8e6324..540895d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "baseUrl": "./",
-    "lib": ["dom", "es2017"],
+    "lib": ["dom", "es2017", "es2022"],
     "jsx": "react",
     "strict": true,
     "esModuleInterop": true,

From 67ebb959cd964ce1830a33e374f8a293893e7e08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 16:51:06 +0800
Subject: [PATCH 09/57] 1.3.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3eb151c..6f1a6f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "React input component",
   "keywords": [
     "react",

From 642379db32290b5dc06f4656ec0bee22b084483b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 17:07:36 +0800
Subject: [PATCH 10/57] fix: missing comps event (#49)

---
 src/Input.tsx        | 12 +++++++++---
 tests/count.test.tsx |  7 +++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 7351f4e..4645995 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -34,6 +34,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     classes,
     classNames,
     styles,
+    onCompositionStart,
+    onCompositionEnd,
     ...rest
   } = props;
 
@@ -114,9 +116,12 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     triggerChange(e, e.target.value);
   };
 
-  const onCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>) => {
+  const onInternalCompositionEnd = (
+    e: React.CompositionEvent<HTMLInputElement>,
+  ) => {
     compositionRef.current = false;
     triggerChange(e, e.currentTarget.value);
+    onCompositionEnd?.(e);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -189,10 +194,11 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         ref={inputRef}
         size={htmlSize}
         type={type}
-        onCompositionStart={() => {
+        onCompositionStart={(e) => {
           compositionRef.current = true;
+          onCompositionStart?.(e);
         }}
-        onCompositionEnd={onCompositionEnd}
+        onCompositionEnd={onInternalCompositionEnd}
       />
     );
   };
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index 2f3ca0e..8ed2edf 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -48,6 +48,9 @@ describe('Input.Count', () => {
   });
 
   it('exceedFormatter', () => {
+    const onCompositionStart = jest.fn();
+    const onCompositionEnd = jest.fn();
+
     const { container } = render(
       <Input
         count={{
@@ -59,6 +62,8 @@ describe('Input.Count', () => {
               .map((seg) => seg.segment)
               .join(''),
         }}
+        onCompositionStart={onCompositionStart}
+        onCompositionEnd={onCompositionEnd}
       />,
     );
 
@@ -70,9 +75,11 @@ describe('Input.Count', () => {
       },
     });
     expect(container.querySelector('input')?.value).toEqual('🔥🔥🔥🔥🔥');
+    expect(onCompositionStart).toHaveBeenCalled();
 
     // Fallback
     fireEvent.compositionEnd(container.querySelector('input')!);
     expect(container.querySelector('input')?.value).toEqual('🔥');
+    expect(onCompositionEnd).toHaveBeenCalled();
   });
 });

From f667c38f45ce5fe48029eeecd2a65f7058c5d9b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 17:08:09 +0800
Subject: [PATCH 11/57] 1.3.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6f1a6f4..8f614c1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "React input component",
   "keywords": [
     "react",

From 7595a5f23d84b1578777ba65c0802ee8f3a9a235 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 17:53:41 +0800
Subject: [PATCH 12/57] chore: wrapper also has oor cls (#50)

---
 src/Input.tsx        |  6 ++++--
 tests/count.test.tsx | 29 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 4645995..c78195b 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -149,6 +149,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     }
   };
 
+  // ====================== Input =======================
+  const outOfRangeCls = isOutOfRange && `${prefixCls}-out-of-range`;
+
   const getInputElement = () => {
     // Fix https://fb.me/react-unknown-prop
     const otherProps = omit(
@@ -186,7 +189,6 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
           prefixCls,
           {
             [`${prefixCls}-disabled`]: disabled,
-            [`${prefixCls}-out-of-range`]: isOutOfRange,
           },
           classNames?.input,
         )}
@@ -246,7 +248,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     <BaseInput
       {...rest}
       prefixCls={prefixCls}
-      className={className}
+      className={clsx(className, outOfRangeCls)}
       inputElement={getInputElement()}
       handleReset={handleReset}
       value={formatValue}
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index 8ed2edf..86470d7 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -82,4 +82,33 @@ describe('Input.Count', () => {
     expect(container.querySelector('input')?.value).toEqual('🔥');
     expect(onCompositionEnd).toHaveBeenCalled();
   });
+
+  describe('cls', () => {
+    it('raw', () => {
+      const { container } = render(
+        <Input
+          count={{
+            max: 3,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+
+      expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+    });
+
+    it('wrapper', () => {
+      const { container } = render(
+        <Input
+          count={{
+            max: 3,
+            show: true,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+
+      expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+    });
+  });
 });

From 117dd8008bacc3af26eab11d17dbf68b4d498cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 27 Sep 2023 17:59:55 +0800
Subject: [PATCH 13/57] 1.3.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8f614c1..7ca4c44 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "React input component",
   "keywords": [
     "react",

From db5525c456a79069dc3e0782d8cd8899c192baa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 28 Sep 2023 10:57:29 +0800
Subject: [PATCH 14/57] fix: mix logic (#51)

---
 src/hooks/useCount.ts | 21 ++++++++++++---------
 src/interface.ts      |  2 +-
 tests/count.test.tsx  | 15 +++++++++++++++
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useCount.ts b/src/hooks/useCount.ts
index a2d4451..feaa53e 100644
--- a/src/hooks/useCount.ts
+++ b/src/hooks/useCount.ts
@@ -25,17 +25,20 @@ export default function useCount(
   showCount?: InputProps['showCount'],
 ) {
   return React.useMemo<ForcedCountConfig>(() => {
-    let mergedConfig = count;
-
-    if (!count) {
-      mergedConfig = {
-        show:
-          typeof showCount === 'object' && showCount.formatter
-            ? showCount.formatter
-            : !!showCount,
-      };
+    let mergedConfig: CountConfig = {};
+
+    if (showCount) {
+      mergedConfig.show =
+        typeof showCount === 'object' && showCount.formatter
+          ? showCount.formatter
+          : !!showCount;
     }
 
+    mergedConfig = {
+      ...mergedConfig,
+      ...count,
+    };
+
     const { show, ...rest } = mergedConfig!;
 
     return {
diff --git a/src/interface.ts b/src/interface.ts
index 736bfaa..3e343ab 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -114,7 +114,7 @@ export interface InputProps
     string
   >;
   onPressEnter?: KeyboardEventHandler<HTMLInputElement>;
-  /** @deprecated Use `count.show` instead */
+  /** It's better to use `count.show` instead */
   showCount?:
     | boolean
     | {
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index 86470d7..bc20473 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -110,5 +110,20 @@ describe('Input.Count', () => {
 
       expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
     });
+
+    it('mix usage', () => {
+      const { container } = render(
+        <Input
+          showCount
+          count={{
+            max: 10,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+      expect(
+        container.querySelector('.rc-input-show-count-suffix')?.textContent,
+      ).toEqual('6 / 10');
+    });
   });
 });

From 0dabe82089e4596a52d9e986d4a9302e6b76cb6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 28 Sep 2023 10:58:06 +0800
Subject: [PATCH 15/57] 1.3.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7ca4c44..eda8eaf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "React input component",
   "keywords": [
     "react",

From a48e9b96a7c670001faf41ff8b1499bd975b4850 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 28 Sep 2023 15:25:01 +0800
Subject: [PATCH 16/57] fix: Selection not keep in sync (#52)

* chore: back of selection

* test: add test case

* chore: lint

* chore: lint
---
 src/Input.tsx        | 18 ++++++++++++++++++
 tests/count.test.tsx | 26 ++++++++++++++++++++++++++
 tsconfig.json        |  2 +-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index c78195b..d14311d 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -57,6 +57,11 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const formatValue =
     value === undefined || value === null ? '' : String(value);
 
+  // =================== Select Range ===================
+  const [selection, setSelection] = React.useState<
+    [start: number, end: number] | null
+  >(null);
+
   // ====================== Count =======================
   const countConfig = useCount(count, showCount);
   const mergedMax = countConfig.max || maxLength;
@@ -104,6 +109,13 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       cutValue = countConfig.exceedFormatter(currentValue, {
         max: countConfig.max,
       });
+
+      if (currentValue !== cutValue) {
+        setSelection([
+          inputRef.current?.selectionStart || 0,
+          inputRef.current?.selectionEnd || 0,
+        ]);
+      }
     }
     setValue(cutValue);
 
@@ -112,6 +124,12 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     }
   };
 
+  React.useEffect(() => {
+    if (selection) {
+      inputRef.current?.setSelectionRange(...selection);
+    }
+  }, [selection]);
+
   const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     triggerChange(e, e.target.value);
   };
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index bc20473..a6c22e4 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -83,6 +83,32 @@ describe('Input.Count', () => {
     expect(onCompositionEnd).toHaveBeenCalled();
   });
 
+  it('exceedFormatter selection', () => {
+    const { container } = render(
+      <Input
+        count={{
+          show: true,
+          max: 3,
+          exceedFormatter: (val, { max }) => val.slice(0, max),
+        }}
+        defaultValue={'123'}
+      />,
+    );
+
+    const input = container.querySelector('input')!;
+    const setSelectionRange = jest.spyOn(input, 'setSelectionRange');
+
+    fireEvent.change(input, {
+      target: {
+        selectionStart: 2,
+        selectionEnd: 2,
+        value: '1a23',
+      },
+    });
+
+    expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
+  });
+
   describe('cls', () => {
     it('raw', () => {
       const { container } = render(
diff --git a/tsconfig.json b/tsconfig.json
index 540895d..71f9c78 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "baseUrl": "./",
-    "lib": ["dom", "es2017", "es2022"],
+    "lib": ["dom", "es2017", "es2022", "esnext"],
     "jsx": "react",
     "strict": true,
     "esModuleInterop": true,

From baf22673612372d479f33c6c1fdebe4bd1bce56e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 28 Sep 2023 15:26:14 +0800
Subject: [PATCH 17/57] 1.3.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eda8eaf..38306d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "React input component",
   "keywords": [
     "react",

From 21336952b91511e7290c044eca42d6b964660c4b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 9 Nov 2023 12:16:09 +0800
Subject: [PATCH 18/57] fix: input type file cannot assign value (#53)

* fix: input type file cannot assign value

* fix: father is missing
---
 package.json             |  2 +-
 src/utils/commonUtils.ts |  6 ++++--
 tests/index.test.tsx     | 12 ++++++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 38306d2..0a25778 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "cross-env": "^7.0.2",
     "dumi": "^2.1.14",
     "eslint": "^7.0.0",
-    "father": "^4",
+    "father": "^4.3.7",
     "gh-pages": "^3.1.0",
     "husky": "^8.0.1",
     "less": "^3.10.3",
diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts
index a1a9e30..7d9eadd 100644
--- a/src/utils/commonUtils.ts
+++ b/src/utils/commonUtils.ts
@@ -57,8 +57,10 @@ export function resolveOnChange<
       target: { value: target },
       currentTarget: { value: target },
     });
-
-    target.value = targetValue;
+    // https://github.com/ant-design/ant-design/issues/45737
+    if (target.type !== 'file') {
+      target.value = targetValue;
+    }
     onChange(event as React.ChangeEvent<E>);
     return;
   }
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 44a7bfa..2a88538 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -79,6 +79,18 @@ describe('Input', () => {
   it('support bigint type', () => {
     expect(<Input value={BigInt('2222')} />).toBeTruthy();
   });
+
+  it('should be compatible with type="file"', () => {
+    const onChange = jest.fn();
+    const { container } = render(<Input type="file" onChange={onChange} />);
+    const inputEl = container.querySelector('input')!;
+    const file = new File(['(⌐□_□)'], 'file.xml', { type: 'application/xml' });
+    // upload the file by updating the value attribute of the input
+    // I assume : <input type="file" data-testid="fileInput" />
+    fireEvent.change(inputEl, {
+      target: { files: [file] },
+    });
+  });
 });
 
 describe('should support showCount', () => {

From c2017068bc10282c877369a51c5690a9057bbc65 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 9 Nov 2023 12:17:18 +0800
Subject: [PATCH 19/57] 1.3.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0a25778..4935de9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "React input component",
   "keywords": [
     "react",

From d75e44df3cc1de67028c290ac6805ad37eed3c49 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 9 Nov 2023 12:20:18 +0800
Subject: [PATCH 20/57] fix: outputPath to .doc

---
 .dumirc.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.dumirc.ts b/.dumirc.ts
index b50763f..a0e7004 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -7,4 +7,5 @@ export default defineConfig({
     name: 'Input',
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
+  outputPath: '.doc',
 });

From c3793b3b35f20e2af9ef54272494f0c4e3d719f8 Mon Sep 17 00:00:00 2001
From: Yoga Lin <47586954+yyz945947732@users.noreply.github.com>
Date: Fri, 8 Dec 2023 22:23:16 +0800
Subject: [PATCH 21/57] fix: fix safari abnormal behavior (#54)

---
 src/utils/commonUtils.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts
index 7d9eadd..15847d8 100644
--- a/src/utils/commonUtils.ts
+++ b/src/utils/commonUtils.ts
@@ -53,13 +53,15 @@ export function resolveOnChange<
 
   // Trigger by composition event, this means we need force change the input value
   if (targetValue !== undefined) {
+    const currentTarget = target.cloneNode(true) as E;
+
     event = Object.create(e, {
-      target: { value: target },
-      currentTarget: { value: target },
+      target: { value: currentTarget },
+      currentTarget: { value: currentTarget },
     });
     // https://github.com/ant-design/ant-design/issues/45737
-    if (target.type !== 'file') {
-      target.value = targetValue;
+    if (currentTarget.type !== 'file') {
+      currentTarget.value = targetValue;
     }
     onChange(event as React.ChangeEvent<E>);
     return;

From 8454e4099815ef848799742b9cc353862b4237af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 12 Dec 2023 12:56:55 +0800
Subject: [PATCH 22/57] 1.3.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4935de9..82fa7bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "React input component",
   "keywords": [
     "react",

From 3bd948e555602ef8439d5a172b605091ec0f6484 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 12 Dec 2023 13:02:12 +0800
Subject: [PATCH 23/57] 1.3.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 82fa7bb..85054c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "React input component",
   "keywords": [
     "react",

From ffdea3f5052203b8ac1d62049a4ab7825a7edb2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 12 Dec 2023 13:05:35 +0800
Subject: [PATCH 24/57] 1.3.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 85054c0..0ad510d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "React input component",
   "keywords": [
     "react",

From de3d711fe777dadbc5672bf036bca30fd56a040d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 12 Dec 2023 13:06:42 +0800
Subject: [PATCH 25/57] 1.3.10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0ad510d..eb9b567 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "description": "React input component",
   "keywords": [
     "react",

From 3c501e325bbe3e8b64f8405ab8f35f819047267a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 12 Dec 2023 13:12:40 +0800
Subject: [PATCH 26/57] 1.3.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eb9b567..e0a377d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.10",
+  "version": "1.3.11",
   "description": "React input component",
   "keywords": [
     "react",

From 063185a1b71a2b9dfe7f2c9e27ca45560dc3ad2a Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Thu, 14 Dec 2023 17:01:50 +0800
Subject: [PATCH 27/57] refactor: BaseInput (#55)

---
 src/BaseInput.tsx        | 120 ++++++++++++++++++---------------------
 src/Input.tsx            |   5 +-
 src/interface.ts         |   6 +-
 tests/BaseInput.test.tsx | 101 +++++++++++++++-----------------
 4 files changed, 107 insertions(+), 125 deletions(-)

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index e1ed697..3364328 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -1,12 +1,13 @@
 import clsx from 'classnames';
-import type { FC, ReactElement } from 'react';
+import type { FC, ReactElement, ReactNode } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { BaseInputProps } from './interface';
 import { hasAddon, hasPrefixSuffix } from './utils/commonUtils';
 
 const BaseInput: FC<BaseInputProps> = (props) => {
   const {
-    inputElement,
+    inputElement: inputEl,
+    children,
     prefixCls,
     prefix,
     suffix,
@@ -29,6 +30,8 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     components,
   } = props;
 
+  const inputElement = children ?? inputEl;
+
   const AffixWrapperComponent = components?.affixWrapper || 'span';
   const GroupWrapperComponent = components?.groupWrapper || 'span';
   const WrapperComponent = components?.wrapper || 'span';
@@ -42,63 +45,51 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     }
   };
 
-  // ================== Clear Icon ================== //
-  const getClearIcon = () => {
-    if (!allowClear) {
-      return null;
-    }
-    const needClear = !disabled && !readOnly && value;
-    const clearIconCls = `${prefixCls}-clear-icon`;
-    const iconNode =
-      typeof allowClear === 'object' && allowClear?.clearIcon
-        ? allowClear.clearIcon
-        : '✖';
-
-    return (
-      <span
-        onClick={handleReset}
-        // Do not trigger onBlur when clear input
-        // https://github.com/ant-design/ant-design/issues/31200
-        onMouseDown={(e) => e.preventDefault()}
-        className={clsx(clearIconCls, {
-          [`${clearIconCls}-hidden`]: !needClear,
-          [`${clearIconCls}-has-suffix`]: !!suffix,
-        })}
-        role="button"
-        tabIndex={-1}
-      >
-        {iconNode}
-      </span>
-    );
-  };
-
   let element: ReactElement = cloneElement(inputElement, {
     value,
-    hidden,
-    className:
-      clsx(
-        inputElement.props?.className,
-        !hasPrefixSuffix(props) && !hasAddon(props) && className,
-      ) || null,
-    style: {
-      ...inputElement.props?.style,
-      ...(!hasPrefixSuffix(props) && !hasAddon(props) ? style : {}),
-    },
   });
 
   // ================== Prefix & Suffix ================== //
   if (hasPrefixSuffix(props)) {
+    // ================== Clear Icon ================== //
+    let clearIcon: ReactNode = null;
+    if (allowClear) {
+      const needClear = !disabled && !readOnly && value;
+      const clearIconCls = `${prefixCls}-clear-icon`;
+      const iconNode =
+        typeof allowClear === 'object' && allowClear?.clearIcon
+          ? allowClear.clearIcon
+          : '✖';
+
+      clearIcon = (
+        <span
+          onClick={handleReset}
+          // Do not trigger onBlur when clear input
+          // https://github.com/ant-design/ant-design/issues/31200
+          onMouseDown={(e) => e.preventDefault()}
+          className={clsx(clearIconCls, {
+            [`${clearIconCls}-hidden`]: !needClear,
+            [`${clearIconCls}-has-suffix`]: !!suffix,
+          })}
+          role="button"
+          tabIndex={-1}
+        >
+          {iconNode}
+        </span>
+      );
+    }
+
     const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`;
     const affixWrapperCls = clsx(
       affixWrapperPrefixCls,
       {
-        [`${affixWrapperPrefixCls}-disabled`]: disabled,
-        [`${affixWrapperPrefixCls}-focused`]: focused,
+        [`${prefixCls}-disabled`]: disabled,
+        [`${affixWrapperPrefixCls}-disabled`]: disabled, // Not used, but keep it
+        [`${affixWrapperPrefixCls}-focused`]: focused, // Not used, but keep it
         [`${affixWrapperPrefixCls}-readonly`]: readOnly,
         [`${affixWrapperPrefixCls}-input-with-clear-btn`]:
           suffix && allowClear && value,
       },
-      !hasAddon(props) && className,
       classes?.affixWrapper,
       classNames?.affixWrapper,
     );
@@ -108,7 +99,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
         className={clsx(`${prefixCls}-suffix`, classNames?.suffix)}
         style={styles?.suffix}
       >
-        {getClearIcon()}
+        {clearIcon}
         {suffix}
       </span>
     );
@@ -116,11 +107,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     element = (
       <AffixWrapperComponent
         className={affixWrapperCls}
-        style={{
-          ...(!hasAddon(props) ? style : undefined),
-          ...styles?.affixWrapper,
-        }}
-        hidden={!hasAddon(props) && hidden}
+        style={styles?.affixWrapper}
         onClick={onInputClick}
         {...dataAttrs?.affixWrapper}
         ref={containerRef}
@@ -133,10 +120,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
             {prefix}
           </span>
         )}
-        {cloneElement(inputElement, {
-          value,
-          hidden: null,
-        })}
+        {element}
         {suffixNode}
       </AffixWrapperComponent>
     );
@@ -151,31 +135,26 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       `${prefixCls}-wrapper`,
       wrapperCls,
       classes?.wrapper,
+      classNames?.wrapper,
     );
 
     const mergedGroupClassName = clsx(
       `${prefixCls}-group-wrapper`,
-      className,
       classes?.group,
+      classNames?.groupWrapper,
     );
 
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
-    return (
-      <GroupWrapperComponent
-        className={mergedGroupClassName}
-        style={style}
-        hidden={hidden}
-      >
+    element = (
+      <GroupWrapperComponent className={mergedGroupClassName}>
         <WrapperComponent className={mergedWrapperClassName}>
           {addonBefore && (
             <GroupAddonComponent className={addonCls}>
               {addonBefore}
             </GroupAddonComponent>
           )}
-          {cloneElement(element, {
-            hidden: null,
-          })}
+          {element}
           {addonAfter && (
             <GroupAddonComponent className={addonCls}>
               {addonAfter}
@@ -185,7 +164,16 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       </GroupWrapperComponent>
     );
   }
-  return element;
+
+  // `className` and `style` are always on the root element
+  return React.cloneElement(element, {
+    className: clsx(element.props?.className, className) || null,
+    style: {
+      ...element.props?.style,
+      ...style,
+    },
+    hidden,
+  });
 };
 
 export default BaseInput;
diff --git a/src/Input.tsx b/src/Input.tsx
index d14311d..abce2a9 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -267,7 +267,6 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       {...rest}
       prefixCls={prefixCls}
       className={clsx(className, outOfRangeCls)}
-      inputElement={getInputElement()}
       handleReset={handleReset}
       value={formatValue}
       focused={focused}
@@ -277,7 +276,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       classes={classes}
       classNames={classNames}
       styles={styles}
-    />
+    >
+      {getInputElement()}
+    </BaseInput>
   );
 });
 
diff --git a/src/interface.ts b/src/interface.ts
index 3e343ab..c2b289b 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -24,6 +24,8 @@ export interface CommonInputProps {
     affixWrapper?: string;
     prefix?: string;
     suffix?: string;
+    groupWrapper?: string;
+    wrapper?: string;
   };
   styles?: {
     affixWrapper?: CSSProperties;
@@ -39,7 +41,8 @@ export type ValueType = InputHTMLAttributes<HTMLInputElement>['value'] | bigint;
 
 export interface BaseInputProps extends CommonInputProps {
   value?: ValueType;
-  inputElement: ReactElement;
+  /** @deprecated Use `children` instead */
+  inputElement?: ReactElement;
   prefixCls?: string;
   className?: string;
   style?: CSSProperties;
@@ -58,6 +61,7 @@ export interface BaseInputProps extends CommonInputProps {
     wrapper?: 'span' | 'div';
     groupAddon?: 'span' | 'div';
   };
+  children: ReactElement;
 }
 
 export type ShowCountFormatter = (args: {
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index 3512eaf..8ca45fd 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -6,7 +6,9 @@ import BaseInput from '../src/BaseInput';
 describe('BaseInput', () => {
   it('should render perfectly', () => {
     const { container } = render(
-      <BaseInput prefixCls="rc-input" inputElement={<input />} />,
+      <BaseInput prefixCls="rc-input">
+        <input />
+      </BaseInput>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -14,18 +16,14 @@ describe('BaseInput', () => {
   it('prefix and suffix should render properly', () => {
     const { container } = render(
       <div>
-        <BaseInput
-          prefixCls="rc-input"
-          inputElement={<input />}
-          prefix="prefix"
-        />
+        <BaseInput prefixCls="rc-input" prefix="prefix">
+          <input />
+        </BaseInput>
         <br />
         <br />
-        <BaseInput
-          prefixCls="rc-input"
-          inputElement={<input />}
-          suffix="suffix"
-        />
+        <BaseInput prefixCls="rc-input" suffix="suffix">
+          <input />
+        </BaseInput>
       </div>,
     );
     expect(container).toMatchSnapshot();
@@ -34,18 +32,14 @@ describe('BaseInput', () => {
   it('addon should render properly', () => {
     const { container } = render(
       <div>
-        <BaseInput
-          prefixCls="rc-input"
-          inputElement={<input />}
-          addonBefore="addonBefore"
-        />
+        <BaseInput prefixCls="rc-input" addonBefore="addonBefore">
+          <input />
+        </BaseInput>
         <br />
         <br />
-        <BaseInput
-          prefixCls="rc-input"
-          inputElement={<input />}
-          addonAfter="addonAfter"
-        />
+        <BaseInput prefixCls="rc-input" addonAfter="addonAfter">
+          <input />
+        </BaseInput>
       </div>,
     );
     expect(container).toMatchSnapshot();
@@ -72,12 +66,11 @@ describe('BaseInput', () => {
         <BaseInput
           prefixCls="rc-input"
           allowClear={{ clearIcon: '✖' }}
-          inputElement={
-            <input onChange={handleChange} onBlur={onBlur} onFocus={onFocus} />
-          }
           value={value}
           handleReset={handleReset}
-        />
+        >
+          <input onChange={handleChange} onBlur={onBlur} onFocus={onFocus} />
+        </BaseInput>
       );
     };
 
@@ -102,16 +95,16 @@ describe('BaseInput', () => {
 
   it('should display clearIcon correctly', () => {
     const { container, rerender } = render(
-      <BaseInput prefixCls="rc-input" inputElement={<input />} allowClear />,
+      <BaseInput prefixCls="rc-input" allowClear>
+        <input />
+      </BaseInput>,
     );
     const clearIcon = container.querySelector('.rc-input-clear-icon');
     expect(clearIcon?.innerHTML).toBe('✖');
     rerender(
-      <BaseInput
-        prefixCls="rc-input"
-        inputElement={<input />}
-        allowClear={{ clearIcon: 'clear' }}
-      />,
+      <BaseInput prefixCls="rc-input" allowClear={{ clearIcon: 'clear' }}>
+        <input />
+      </BaseInput>,
     );
     expect(clearIcon?.innerHTML).toBe('clear');
   });
@@ -121,10 +114,11 @@ describe('BaseInput', () => {
     const { container } = render(
       <BaseInput
         prefixCls="rc-input"
-        inputElement={<input ref={inputRef} />}
         triggerFocus={() => inputRef.current?.focus()}
         prefix="$"
-      />,
+      >
+        <input ref={inputRef} />
+      </BaseInput>,
     );
     fireEvent.click(container.querySelector('.rc-input-affix-wrapper')!);
     expect(document.activeElement).toBe(container.querySelector('input'));
@@ -140,8 +134,9 @@ describe('BaseInput', () => {
             'data-test': 'test',
           },
         }}
-        inputElement={<input />}
-      />,
+      >
+        <input />
+      </BaseInput>,
     );
     expect(
       container
@@ -152,11 +147,9 @@ describe('BaseInput', () => {
 
   it('should apply className to inputElement', () => {
     const { container } = render(
-      <BaseInput
-        prefixCls="rc-input"
-        className="test-base"
-        inputElement={<input className="test" />}
-      />,
+      <BaseInput prefixCls="rc-input" className="test-base">
+        <input className="test" />
+      </BaseInput>,
     );
     expect(container.querySelector('.test-base')).toBeTruthy();
     expect(container.querySelector('.test')).toBeTruthy();
@@ -164,12 +157,9 @@ describe('BaseInput', () => {
 
   it('should not pass className to inputElement when has addon', () => {
     const { container } = render(
-      <BaseInput
-        prefixCls="rc-input"
-        className="test-base"
-        addonBefore="addon"
-        inputElement={<input className="test" />}
-      />,
+      <BaseInput prefixCls="rc-input" className="test-base" addonBefore="addon">
+        <input className="test" />
+      </BaseInput>,
     );
     expect(
       container.querySelector('input')?.classList.contains('test'),
@@ -181,12 +171,9 @@ describe('BaseInput', () => {
 
   it('should correct render with prefix and addon', () => {
     const { container } = render(
-      <BaseInput
-        prefixCls="rc-input"
-        prefix="prefix"
-        addonBefore="addon"
-        inputElement={<input />}
-      />,
+      <BaseInput prefixCls="rc-input" prefix="prefix" addonBefore="addon">
+        <input />
+      </BaseInput>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -197,14 +184,15 @@ describe('BaseInput', () => {
         prefixCls="rc-input"
         prefix="prefix"
         addonBefore="addon"
-        inputElement={<input />}
         components={{
           affixWrapper: 'div',
           groupWrapper: 'div',
           wrapper: 'div',
           groupAddon: 'div',
         }}
-      />,
+      >
+        <input />
+      </BaseInput>,
     );
     expect(container).toMatchSnapshot();
   });
@@ -215,7 +203,6 @@ describe('BaseInput', () => {
         prefixCls="rc-input"
         prefix="prefix"
         addonBefore="addon"
-        inputElement={<input />}
         styles={{
           affixWrapper: {
             color: 'red',
@@ -224,7 +211,9 @@ describe('BaseInput', () => {
             color: 'blue',
           },
         }}
-      />,
+      >
+        <input />
+      </BaseInput>,
     );
 
     expect(

From 1aec10f38254f0cb6d9741bc19ef5b738b2abe43 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 14 Dec 2023 17:21:40 +0800
Subject: [PATCH 28/57] v1.4.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e0a377d..2ceb8f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.3.11",
+  "version": "1.4.0",
   "description": "React input component",
   "keywords": [
     "react",

From 6ea03ea7de5bd528428ba7cf43224a373a3947b3 Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Fri, 15 Dec 2023 16:54:35 +0800
Subject: [PATCH 29/57] feat: group wrapper should have disabled cls (#56)

---
 src/BaseInput.tsx        |  6 +++++-
 tests/BaseInput.test.tsx | 10 ++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index 3364328..ae4ff4d 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -130,6 +130,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
   if (hasAddon(props)) {
     const wrapperCls = `${prefixCls}-group`;
     const addonCls = `${wrapperCls}-addon`;
+    const groupWrapperCls = `${wrapperCls}-wrapper`;
 
     const mergedWrapperClassName = clsx(
       `${prefixCls}-wrapper`,
@@ -139,7 +140,10 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     );
 
     const mergedGroupClassName = clsx(
-      `${prefixCls}-group-wrapper`,
+      groupWrapperCls,
+      {
+        [`${groupWrapperCls}-disabled`]: disabled,
+      },
       classes?.group,
       classNames?.groupWrapper,
     );
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index 8ca45fd..55cc543 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -226,4 +226,14 @@ describe('BaseInput', () => {
         ?.style.color,
     ).toBe('blue');
   });
+
+  it('with addon and disabled', () => {
+    const { container } = render(
+      <BaseInput prefixCls="rc-input" addonBefore="addon" disabled>
+        <input />
+      </BaseInput>,
+    );
+
+    expect(container.firstChild).toHaveClass('rc-input-group-wrapper-disabled');
+  });
 });

From 374d975d3f44e263987bce8e88f5e0b065df06a6 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 15 Dec 2023 16:55:09 +0800
Subject: [PATCH 30/57] v1.4.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2ceb8f7..5f9a1e3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "React input component",
   "keywords": [
     "react",

From ebbe8d4022c891fa08f2531b80837462faff457f Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Fri, 15 Dec 2023 17:56:34 +0800
Subject: [PATCH 31/57] feat: classNames support variant (#57)

* feat: classNames support variant

* chore: code clean
---
 src/BaseInput.tsx        |  8 +++++++-
 src/interface.ts         |  1 +
 tests/BaseInput.test.tsx | 31 +++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index ae4ff4d..4cee233 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -45,12 +45,17 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     }
   };
 
+  const hasAffix = hasPrefixSuffix(props);
+
   let element: ReactElement = cloneElement(inputElement, {
     value,
+    className:
+      clsx(inputElement.props.className, !hasAffix && classNames?.variant) ||
+      null,
   });
 
   // ================== Prefix & Suffix ================== //
-  if (hasPrefixSuffix(props)) {
+  if (hasAffix) {
     // ================== Clear Icon ================== //
     let clearIcon: ReactNode = null;
     if (allowClear) {
@@ -92,6 +97,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       },
       classes?.affixWrapper,
       classNames?.affixWrapper,
+      classNames?.variant,
     );
 
     const suffixNode = (suffix || allowClear) && (
diff --git a/src/interface.ts b/src/interface.ts
index c2b289b..0270361 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -26,6 +26,7 @@ export interface CommonInputProps {
     suffix?: string;
     groupWrapper?: string;
     wrapper?: string;
+    variant?: string;
   };
   styles?: {
     affixWrapper?: CSSProperties;
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index 55cc543..21a890c 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -236,4 +236,35 @@ describe('BaseInput', () => {
 
     expect(container.firstChild).toHaveClass('rc-input-group-wrapper-disabled');
   });
+
+  it('variant cls', () => {
+    const { container, rerender } = render(
+      <BaseInput
+        prefixCls="rc-input"
+        prefix="$"
+        classNames={{ variant: 'test-variant' }}
+        disabled
+      >
+        <input />
+      </BaseInput>,
+    );
+
+    expect(container.querySelector('.rc-input-affix-wrapper')).toHaveClass(
+      'test-variant',
+    );
+    expect(container.querySelector('input')).not.toHaveClass('test-variant');
+
+    rerender(
+      <BaseInput
+        prefixCls="rc-input"
+        classNames={{ variant: 'test-variant' }}
+        disabled
+      >
+        <input />
+      </BaseInput>,
+    );
+
+    expect(container.querySelector('.rc-input-affix-wrapper')).toBeFalsy();
+    expect(container.querySelector('input')).toHaveClass('test-variant');
+  });
 });

From 6f55ae3c645b3c8c3b9ac6be2a24cdc5b1b3bba9 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 15 Dec 2023 17:57:24 +0800
Subject: [PATCH 32/57] v1.4.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5f9a1e3..7ed9d8d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "React input component",
   "keywords": [
     "react",

From 964064924f2c7e2747f6d4444f713fd0ff46908d Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Sun, 24 Dec 2023 14:38:19 +0800
Subject: [PATCH 33/57] fix: fix onChange fired without files issue (#58)

* fix: fix onChange fired without files issue

* chore: remove debugger

* chore: comment more

* chore: code style
---
 src/utils/commonUtils.ts | 15 ++++++++++-----
 tests/index.test.tsx     |  3 +++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts
index 15847d8..30a0e84 100644
--- a/src/utils/commonUtils.ts
+++ b/src/utils/commonUtils.ts
@@ -38,6 +38,9 @@ export function resolveOnChange<
     //   }}
     // />
 
+    // A bug report filed on WebKit's Bugzilla tracker, dating back to 2009, specifically addresses the issue of cloneNode() not copying files of <input type="file"> elements.
+    // As of the last update, this bug was still marked as "NEW," indicating that it might not have been resolved yet​​.
+    // https://bugs.webkit.org/show_bug.cgi?id=28123
     const currentTarget = target.cloneNode(true) as E;
 
     // click clear icon
@@ -52,17 +55,19 @@ export function resolveOnChange<
   }
 
   // Trigger by composition event, this means we need force change the input value
-  if (targetValue !== undefined) {
+  // https://github.com/ant-design/ant-design/issues/45737
+  // https://github.com/ant-design/ant-design/issues/46598
+  if (target.type !== 'file' && targetValue !== undefined) {
+    // A bug report filed on WebKit's Bugzilla tracker, dating back to 2009, specifically addresses the issue of cloneNode() not copying files of <input type="file"> elements.
+    // As of the last update, this bug was still marked as "NEW," indicating that it might not have been resolved yet​​.
+    // https://bugs.webkit.org/show_bug.cgi?id=28123
     const currentTarget = target.cloneNode(true) as E;
 
     event = Object.create(e, {
       target: { value: currentTarget },
       currentTarget: { value: currentTarget },
     });
-    // https://github.com/ant-design/ant-design/issues/45737
-    if (currentTarget.type !== 'file') {
-      currentTarget.value = targetValue;
-    }
+    currentTarget.value = targetValue;
     onChange(event as React.ChangeEvent<E>);
     return;
   }
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 2a88538..bb5c757 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -90,6 +90,9 @@ describe('Input', () => {
     fireEvent.change(inputEl, {
       target: { files: [file] },
     });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange.mock.calls[0][0].target.files[0]).toBe(file);
   });
 });
 

From 3aba0073a2e047e242d7f1a44c32d5bdf710a3be Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Thu, 28 Dec 2023 14:32:14 +0800
Subject: [PATCH 34/57] fix: trigger onChange twice when inputting using the
 input method (#61)

* fix: trigger onChange twice when inputting using the input method

* chore: code style
---
 src/Input.tsx        | 21 +++++++++++++++------
 src/interface.ts     |  4 ++++
 tests/count.test.tsx | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index abce2a9..866b211 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -10,7 +10,7 @@ import React, {
 } from 'react';
 import BaseInput from './BaseInput';
 import useCount from './hooks/useCount';
-import type { InputProps, InputRef } from './interface';
+import type { ChangeEventInfo, InputProps, InputRef } from './interface';
 import type { InputFocusOptions } from './utils/commonUtils';
 import { resolveOnChange, triggerFocus } from './utils/commonUtils';
 
@@ -40,7 +40,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   } = props;
 
   const [focused, setFocused] = useState<boolean>(false);
-  const compositionRef = React.useRef(false);
+  const compositionRef = useRef(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -58,7 +58,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     value === undefined || value === null ? '' : String(value);
 
   // =================== Select Range ===================
-  const [selection, setSelection] = React.useState<
+  const [selection, setSelection] = useState<
     [start: number, end: number] | null
   >(null);
 
@@ -97,6 +97,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       | React.ChangeEvent<HTMLInputElement>
       | React.CompositionEvent<HTMLInputElement>,
     currentValue: string,
+    info: ChangeEventInfo,
   ) => {
     let cutValue = currentValue;
 
@@ -116,6 +117,10 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
           inputRef.current?.selectionEnd || 0,
         ]);
       }
+    } else if (info.source === 'compositionEnd') {
+      // Avoid triggering twice
+      // https://github.com/ant-design/ant-design/issues/46587
+      return;
     }
     setValue(cutValue);
 
@@ -124,21 +129,25 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (selection) {
       inputRef.current?.setSelectionRange(...selection);
     }
   }, [selection]);
 
   const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    triggerChange(e, e.target.value);
+    triggerChange(e, e.target.value, {
+      source: 'change',
+    });
   };
 
   const onInternalCompositionEnd = (
     e: React.CompositionEvent<HTMLInputElement>,
   ) => {
     compositionRef.current = false;
-    triggerChange(e, e.currentTarget.value);
+    triggerChange(e, e.currentTarget.value, {
+      source: 'compositionEnd',
+    });
     onCompositionEnd?.(e);
   };
 
diff --git a/src/interface.ts b/src/interface.ts
index 0270361..1800125 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -149,3 +149,7 @@ export interface InputRef {
   select: () => void;
   input: HTMLInputElement | null;
 }
+
+export interface ChangeEventInfo {
+  source: 'compositionEnd' | 'change';
+}
diff --git a/tests/count.test.tsx b/tests/count.test.tsx
index a6c22e4..ccee16e 100644
--- a/tests/count.test.tsx
+++ b/tests/count.test.tsx
@@ -109,6 +109,45 @@ describe('Input.Count', () => {
     expect(setSelectionRange).toHaveBeenCalledWith(2, 2);
   });
 
+  it('input using the input method should trigger onChange once', () => {
+    const onChange = jest.fn();
+    const { container } = render(<Input onChange={onChange} />);
+    const input = container.querySelector('input')!;
+    fireEvent.compositionStart(input);
+    fireEvent.compositionUpdate(input, { data: '你' });
+    fireEvent.compositionEnd(input, { data: '你好' });
+    fireEvent.input(input, { target: { value: '你好' } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('using the input method to enter the cropped content should trigger onChange twice', () => {
+    const onChange = jest.fn();
+    const onCompositionEnd = jest.fn();
+    const { container } = render(
+      <Input
+        count={{
+          show: true,
+          max: 3,
+          exceedFormatter: (val, { max }) =>
+            getSegments(val)
+              .filter((seg) => seg.index + seg.segment.length <= max)
+              .map((seg) => seg.segment)
+              .join(''),
+        }}
+        onChange={onChange}
+        onCompositionEnd={onCompositionEnd}
+      />,
+    );
+    const input = container.querySelector('input')!;
+    fireEvent.compositionStart(input);
+    fireEvent.compositionUpdate(input, { target: { value: '你' } });
+    fireEvent.compositionUpdate(input, { target: { value: '你好' } });
+    fireEvent.compositionUpdate(input, { target: { value: '你好世' } });
+    fireEvent.compositionUpdate(input, { target: { value: '你好世界' } });
+    fireEvent.compositionEnd(input, { target: { value: '你好世界' } });
+    expect(input?.value).toEqual('你好世');
+  });
+
   describe('cls', () => {
     it('raw', () => {
       const { container } = render(

From e643b06174fe363d95f312d5ae8b41016df3bc38 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 28 Dec 2023 14:36:21 +0800
Subject: [PATCH 35/57] v1.4.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7ed9d8d..d68c5c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "React input component",
   "keywords": [
     "react",

From 96104010097f4a44b44cd553c75e279e8564d7af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Mon, 11 Mar 2024 11:45:42 +0800
Subject: [PATCH 36/57] fix: change event should provider correct selection
 data (#65)

* fix: selection

* test: add test case
---
 .gitignore               |  1 +
 src/utils/commonUtils.ts | 47 ++++++++++++++++++++++------------------
 tests/index.test.tsx     | 13 +++++++++++
 3 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index f1b640b..28e90fc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,4 @@ dist/
 # dumi
 .dumi/tmp
 .dumi/tmp-production
+.node
diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts
index 30a0e84..d835f80 100644
--- a/src/utils/commonUtils.ts
+++ b/src/utils/commonUtils.ts
@@ -9,6 +9,30 @@ export function hasPrefixSuffix(props: BaseInputProps | InputProps) {
   return !!(props.prefix || props.suffix || props.allowClear);
 }
 
+// TODO: It's better to use `Proxy` replace the `element.value`. But we still need support IE11.
+function cloneEvent<
+  EventType extends React.SyntheticEvent<any, any>,
+  Element extends HTMLInputElement | HTMLTextAreaElement,
+>(event: EventType, target: Element, value: any): EventType {
+  // A bug report filed on WebKit's Bugzilla tracker, dating back to 2009, specifically addresses the issue of cloneNode() not copying files of <input type="file"> elements.
+  // As of the last update, this bug was still marked as "NEW," indicating that it might not have been resolved yet​​.
+  // https://bugs.webkit.org/show_bug.cgi?id=28123
+  const currentTarget = target.cloneNode(true) as Element;
+
+  // click clear icon
+  const newEvent = Object.create(event, {
+    target: { value: currentTarget },
+    currentTarget: { value: currentTarget },
+  });
+
+  // Fill data
+  currentTarget.value = value;
+  currentTarget.selectionStart = target.selectionStart;
+  currentTarget.selectionEnd = target.selectionEnd;
+
+  return newEvent;
+}
+
 export function resolveOnChange<
   E extends HTMLInputElement | HTMLTextAreaElement,
 >(
@@ -38,18 +62,8 @@ export function resolveOnChange<
     //   }}
     // />
 
-    // A bug report filed on WebKit's Bugzilla tracker, dating back to 2009, specifically addresses the issue of cloneNode() not copying files of <input type="file"> elements.
-    // As of the last update, this bug was still marked as "NEW," indicating that it might not have been resolved yet​​.
-    // https://bugs.webkit.org/show_bug.cgi?id=28123
-    const currentTarget = target.cloneNode(true) as E;
-
-    // click clear icon
-    event = Object.create(e, {
-      target: { value: currentTarget },
-      currentTarget: { value: currentTarget },
-    });
+    event = cloneEvent(e, target, '');
 
-    currentTarget.value = '';
     onChange(event as React.ChangeEvent<E>);
     return;
   }
@@ -58,16 +72,7 @@ export function resolveOnChange<
   // https://github.com/ant-design/ant-design/issues/45737
   // https://github.com/ant-design/ant-design/issues/46598
   if (target.type !== 'file' && targetValue !== undefined) {
-    // A bug report filed on WebKit's Bugzilla tracker, dating back to 2009, specifically addresses the issue of cloneNode() not copying files of <input type="file"> elements.
-    // As of the last update, this bug was still marked as "NEW," indicating that it might not have been resolved yet​​.
-    // https://bugs.webkit.org/show_bug.cgi?id=28123
-    const currentTarget = target.cloneNode(true) as E;
-
-    event = Object.create(e, {
-      target: { value: currentTarget },
-      currentTarget: { value: currentTarget },
-    });
-    currentTarget.value = targetValue;
+    event = cloneEvent(e, target, targetValue);
     onChange(event as React.ChangeEvent<E>);
     return;
   }
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index bb5c757..dfd0dbf 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -349,6 +349,19 @@ describe('Input ref', () => {
     inputSpy.mockRestore();
   });
 
+  it('selectionXXX should pass', () => {
+    const onChange = jest.fn();
+    const { container } = render(<Input onChange={onChange} />);
+
+    const inputEl = container.querySelector('input')!;
+    fireEvent.change(inputEl, { target: { value: 'test' } });
+
+    expect(onChange).toHaveBeenCalled();
+    const event = onChange.mock.calls[0][0];
+    expect(event.target.selectionStart).toBe(4);
+    expect(event.target.selectionEnd).toBe(4);
+  });
+
   it('input should work', () => {
     const ref = React.createRef<InputRef>();
     const { container } = render(<Input ref={ref} defaultValue="light" />);

From b85cb22bbe169fcfafcd7c0687f7033c2a93d81e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 11 Mar 2024 11:47:44 +0800
Subject: [PATCH 37/57] 1.4.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d68c5c9..a6ff42a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "React input component",
   "keywords": [
     "react",

From 160a99cdaf262b5c05a34688152e823ffff105fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 12 Mar 2024 10:53:31 +0800
Subject: [PATCH 38/57] fix: email type (#67)

---
 src/utils/commonUtils.ts | 12 ++++++--
 tests/index.test.tsx     | 63 +++++++++++++++++++++++++---------------
 2 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts
index d835f80..ffc0d51 100644
--- a/src/utils/commonUtils.ts
+++ b/src/utils/commonUtils.ts
@@ -27,8 +27,16 @@ function cloneEvent<
 
   // Fill data
   currentTarget.value = value;
-  currentTarget.selectionStart = target.selectionStart;
-  currentTarget.selectionEnd = target.selectionEnd;
+
+  // Fill selection. Some type like `email` not support selection
+  // https://github.com/ant-design/ant-design/issues/47833
+  if (
+    typeof target.selectionStart === 'number' &&
+    typeof target.selectionEnd === 'number'
+  ) {
+    currentTarget.selectionStart = target.selectionStart;
+    currentTarget.selectionEnd = target.selectionEnd;
+  }
 
   return newEvent;
 }
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index dfd0dbf..cf02d61 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -332,34 +332,49 @@ describe('Input ref', () => {
     inputSpy.mockRestore();
   });
 
-  it('setSelectionRange should work', () => {
-    const setSelectionRange = jest.fn();
-    const inputSpy = spyElementPrototypes(HTMLInputElement, {
-      setSelectionRange,
+  describe('selection', () => {
+    it('setSelectionRange should work', () => {
+      const setSelectionRange = jest.fn();
+      const inputSpy = spyElementPrototypes(HTMLInputElement, {
+        setSelectionRange,
+      });
+      const ref = React.createRef<InputRef>();
+      render(<Input ref={ref} defaultValue="light" prefixCls="rc-input" />);
+      ref.current?.setSelectionRange(0, 0);
+      expect(setSelectionRange).toHaveBeenCalledWith(
+        expect.anything(),
+        0,
+        0,
+        undefined,
+      );
+      inputSpy.mockRestore();
     });
-    const ref = React.createRef<InputRef>();
-    render(<Input ref={ref} defaultValue="light" prefixCls="rc-input" />);
-    ref.current?.setSelectionRange(0, 0);
-    expect(setSelectionRange).toHaveBeenCalledWith(
-      expect.anything(),
-      0,
-      0,
-      undefined,
-    );
-    inputSpy.mockRestore();
-  });
 
-  it('selectionXXX should pass', () => {
-    const onChange = jest.fn();
-    const { container } = render(<Input onChange={onChange} />);
+    it('selectionXXX should pass', () => {
+      const onChange = jest.fn();
+      const { container } = render(<Input onChange={onChange} />);
 
-    const inputEl = container.querySelector('input')!;
-    fireEvent.change(inputEl, { target: { value: 'test' } });
+      const inputEl = container.querySelector('input')!;
+      fireEvent.change(inputEl, { target: { value: 'test' } });
 
-    expect(onChange).toHaveBeenCalled();
-    const event = onChange.mock.calls[0][0];
-    expect(event.target.selectionStart).toBe(4);
-    expect(event.target.selectionEnd).toBe(4);
+      expect(onChange).toHaveBeenCalled();
+      const event = onChange.mock.calls[0][0];
+      expect(event.target.selectionStart).toBe(4);
+      expect(event.target.selectionEnd).toBe(4);
+    });
+
+    it('email type not support selection', () => {
+      const onChange = jest.fn();
+      const { container } = render(<Input type="email" onChange={onChange} />);
+
+      fireEvent.change(container.querySelector('input')!, {
+        target: { value: 'test' },
+      });
+      expect(onChange).toHaveBeenCalled();
+      const event = onChange.mock.calls[0][0];
+      expect(event.target.selectionStart).toBeNull();
+      expect(event.target.selectionEnd).toBeNull();
+    });
   });
 
   it('input should work', () => {

From 0f81074b94674e5ec41ab76fc4744fba3514f67d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 12 Mar 2024 11:16:35 +0800
Subject: [PATCH 39/57] 1.4.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a6ff42a..029a970 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "React input component",
   "keywords": [
     "react",

From 5028dfda9f07e19e21cc8e5f6ec80306b078546d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 17 May 2024 23:09:01 +0800
Subject: [PATCH 40/57] feat: support nativeElement (#68)

* feat: support nativeElement

* chore: update
---
 src/BaseInput.tsx        | 20 +++++++++++++----
 src/Input.tsx            |  4 +++-
 src/interface.ts         |  1 +
 tests/BaseInput.test.tsx | 47 +++++++++++++++++++++++++++++++++++++++-
 tests/index.test.tsx     |  1 +
 5 files changed, 67 insertions(+), 6 deletions(-)

diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index 4cee233..d3a1740 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -1,10 +1,15 @@
 import clsx from 'classnames';
-import type { FC, ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { BaseInputProps } from './interface';
 import { hasAddon, hasPrefixSuffix } from './utils/commonUtils';
 
-const BaseInput: FC<BaseInputProps> = (props) => {
+export interface HolderRef {
+  /** Provider holder ref. Will return `null` if not wrap anything */
+  nativeElement: HTMLElement | null;
+}
+
+const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
   const {
     inputElement: inputEl,
     children,
@@ -54,6 +59,13 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       null,
   });
 
+  // ======================== Ref ======================== //
+  const groupRef = useRef<HTMLDivElement>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    nativeElement: groupRef.current || containerRef.current,
+  }));
+
   // ================== Prefix & Suffix ================== //
   if (hasAffix) {
     // ================== Clear Icon ================== //
@@ -157,7 +169,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
     element = (
-      <GroupWrapperComponent className={mergedGroupClassName}>
+      <GroupWrapperComponent className={mergedGroupClassName} ref={groupRef}>
         <WrapperComponent className={mergedWrapperClassName}>
           {addonBefore && (
             <GroupAddonComponent className={addonCls}>
@@ -184,6 +196,6 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     },
     hidden,
   });
-};
+});
 
 export default BaseInput;
diff --git a/src/Input.tsx b/src/Input.tsx
index 866b211..a755d03 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import BaseInput from './BaseInput';
+import BaseInput, { HolderRef } from './BaseInput';
 import useCount from './hooks/useCount';
 import type { ChangeEventInfo, InputProps, InputRef } from './interface';
 import type { InputFocusOptions } from './utils/commonUtils';
@@ -43,6 +43,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const compositionRef = useRef(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const holderRef = useRef<HolderRef>(null);
 
   const focus = (option?: InputFocusOptions) => {
     if (inputRef.current) {
@@ -86,6 +87,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       inputRef.current?.select();
     },
     input: inputRef.current,
+    nativeElement: holderRef.current?.nativeElement || inputRef.current,
   }));
 
   useEffect(() => {
diff --git a/src/interface.ts b/src/interface.ts
index 1800125..8b3adcc 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -148,6 +148,7 @@ export interface InputRef {
   ) => void;
   select: () => void;
   input: HTMLInputElement | null;
+  nativeElement: HTMLElement | null;
 }
 
 export interface ChangeEventInfo {
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index 21a890c..57be9b6 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import type { ChangeEvent, FC } from 'react';
 import React, { useState } from 'react';
-import BaseInput from '../src/BaseInput';
+import BaseInput, { type HolderRef } from '../src/BaseInput';
 
 describe('BaseInput', () => {
   it('should render perfectly', () => {
@@ -267,4 +267,49 @@ describe('BaseInput', () => {
     expect(container.querySelector('.rc-input-affix-wrapper')).toBeFalsy();
     expect(container.querySelector('input')).toHaveClass('test-variant');
   });
+
+  describe('ref', () => {
+    it('prefix', () => {
+      const holderRef = React.createRef<HolderRef>();
+      const { container } = render(
+        <BaseInput prefixCls="rc-input" prefix="prefix" ref={holderRef}>
+          <input />
+        </BaseInput>,
+      );
+      expect(holderRef.current?.nativeElement).toBe(
+        container.querySelector('.rc-input-affix-wrapper'),
+      );
+    });
+
+    it('addon', () => {
+      const holderRef = React.createRef<HolderRef>();
+      const { container } = render(
+        <BaseInput prefixCls="rc-input" addonAfter="after" ref={holderRef}>
+          <input />
+        </BaseInput>,
+      );
+
+      expect(holderRef.current?.nativeElement).toBe(
+        container.querySelector('.rc-input-group-wrapper'),
+      );
+    });
+
+    it('mix', () => {
+      const holderRef = React.createRef<HolderRef>();
+      const { container } = render(
+        <BaseInput
+          prefixCls="rc-input"
+          suffix="suffix"
+          addonAfter="after"
+          ref={holderRef}
+        >
+          <input />
+        </BaseInput>,
+      );
+
+      expect(holderRef.current?.nativeElement).toBe(
+        container.querySelector('.rc-input-group-wrapper'),
+      );
+    });
+  });
 });
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index cf02d61..0c12ad5 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -382,6 +382,7 @@ describe('Input ref', () => {
     const { container } = render(<Input ref={ref} defaultValue="light" />);
     const inputEl = container.querySelector('input')!;
     expect(ref.current?.input).toBe(inputEl);
+    expect(ref.current?.nativeElement).toBe(inputEl);
   });
 });
 

From fe304559824945a984957e47ea95e6557e973980 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 17 May 2024 23:11:13 +0800
Subject: [PATCH 41/57] 1.5.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 029a970..e19fdbb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "React input component",
   "keywords": [
     "react",

From 490c37e518200e2fbe2abbd3eb38fde4e5231079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 22 May 2024 15:00:42 +0800
Subject: [PATCH 42/57] fix: Proxy of setSelectionRange (#70)

* fix: rc-input change event

* test: add test case
---
 src/utils/commonUtils.ts | 4 ++++
 tests/index.test.tsx     | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/utils/commonUtils.ts b/src/utils/commonUtils.ts
index ffc0d51..d17ee30 100644
--- a/src/utils/commonUtils.ts
+++ b/src/utils/commonUtils.ts
@@ -38,6 +38,10 @@ function cloneEvent<
     currentTarget.selectionEnd = target.selectionEnd;
   }
 
+  currentTarget.setSelectionRange = (...args) => {
+    target.setSelectionRange(...args);
+  };
+
   return newEvent;
 }
 
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 0c12ad5..a9c1e72 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -353,6 +353,10 @@ describe('Input ref', () => {
     it('selectionXXX should pass', () => {
       const onChange = jest.fn();
       const { container } = render(<Input onChange={onChange} />);
+      const spySetSelectionRange = jest.spyOn(
+        container.querySelector('input')!,
+        'setSelectionRange',
+      );
 
       const inputEl = container.querySelector('input')!;
       fireEvent.change(inputEl, { target: { value: 'test' } });
@@ -361,6 +365,10 @@ describe('Input ref', () => {
       const event = onChange.mock.calls[0][0];
       expect(event.target.selectionStart).toBe(4);
       expect(event.target.selectionEnd).toBe(4);
+
+      // Call `setSelectionRange`
+      event.target.setSelectionRange(1, 2);
+      expect(spySetSelectionRange).toHaveBeenCalledWith(1, 2);
     });
 
     it('email type not support selection', () => {

From c18cc42cc504264b9d0683c0eda4dab1aa3b62b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 22 May 2024 15:45:25 +0800
Subject: [PATCH 43/57] 1.5.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e19fdbb..aea744b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "React input component",
   "keywords": [
     "react",

From fe176c3fdcec536040fbf683ea81a9d67f1d20ea Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 16 Jul 2024 17:25:49 +0800
Subject: [PATCH 44/57] feat: support onClear callback (#71)

* feat: support onClear callback

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix
---
 docs/examples/addon.tsx  |  2 +-
 src/BaseInput.tsx        |  6 +++++-
 src/Input.tsx            |  3 ++-
 src/interface.ts         |  2 ++
 tests/BaseInput.test.tsx | 13 +++++++++++++
 tests/index.test.tsx     | 11 +++++++++++
 6 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/docs/examples/addon.tsx b/docs/examples/addon.tsx
index f461ce5..7f9b884 100644
--- a/docs/examples/addon.tsx
+++ b/docs/examples/addon.tsx
@@ -1,7 +1,7 @@
+import Input from 'rc-input';
 import type { FC } from 'react';
 import React from 'react';
 import '../../assets/index.less';
-import Input from 'rc-input';
 
 const Demo: FC = () => {
   return (
diff --git a/src/BaseInput.tsx b/src/BaseInput.tsx
index d3a1740..5d18647 100644
--- a/src/BaseInput.tsx
+++ b/src/BaseInput.tsx
@@ -33,6 +33,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
     dataAttrs,
     styles,
     components,
+    onClear,
   } = props;
 
   const inputElement = children ?? inputEl;
@@ -80,7 +81,10 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
 
       clearIcon = (
         <span
-          onClick={handleReset}
+          onClick={(event) => {
+            handleReset?.(event);
+            onClear?.();
+          }}
           // Do not trigger onBlur when clear input
           // https://github.com/ant-design/ant-design/issues/31200
           onMouseDown={(e) => e.preventDefault()}
diff --git a/src/Input.tsx b/src/Input.tsx
index a755d03..261f14d 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -8,7 +8,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import BaseInput, { HolderRef } from './BaseInput';
+import type { HolderRef } from './BaseInput';
+import BaseInput from './BaseInput';
 import useCount from './hooks/useCount';
 import type { ChangeEventInfo, InputProps, InputRef } from './interface';
 import type { InputFocusOptions } from './utils/commonUtils';
diff --git a/src/interface.ts b/src/interface.ts
index 8b3adcc..b6243e1 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -52,6 +52,7 @@ export interface BaseInputProps extends CommonInputProps {
   triggerFocus?: () => void;
   readOnly?: boolean;
   handleReset?: MouseEventHandler;
+  onClear?: () => void;
   hidden?: boolean;
   dataAttrs?: {
     affixWrapper?: DataAttr;
@@ -136,6 +137,7 @@ export interface InputProps
     count?: CSSProperties;
   };
   count?: CountConfig;
+  onClear?: () => void;
 }
 
 export interface InputRef {
diff --git a/tests/BaseInput.test.tsx b/tests/BaseInput.test.tsx
index 57be9b6..37cb282 100644
--- a/tests/BaseInput.test.tsx
+++ b/tests/BaseInput.test.tsx
@@ -311,5 +311,18 @@ describe('BaseInput', () => {
         container.querySelector('.rc-input-group-wrapper'),
       );
     });
+
+    it('support onClear', () => {
+      const onClear = jest.fn();
+      const { container } = render(
+        <BaseInput prefixCls="rc-input" onClear={onClear} allowClear>
+          <input defaultValue="test" />
+        </BaseInput>,
+      );
+      fireEvent.click(
+        container.querySelector<HTMLSpanElement>('.rc-input-clear-icon')!,
+      );
+      expect(onClear).toHaveBeenCalled();
+    });
   });
 });
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index a9c1e72..8d104ab 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -392,6 +392,17 @@ describe('Input ref', () => {
     expect(ref.current?.input).toBe(inputEl);
     expect(ref.current?.nativeElement).toBe(inputEl);
   });
+
+  it('support onClear', () => {
+    const onClear = jest.fn();
+    const { container } = render(
+      <Input onClear={onClear} defaultValue="test" allowClear />,
+    );
+    fireEvent.click(
+      container.querySelector<HTMLSpanElement>('.rc-input-clear-icon')!,
+    );
+    expect(onClear).toHaveBeenCalled();
+  });
 });
 
 describe('resolveChange should work', () => {

From 31ebcec3fd780524b8399933e634574b370b0556 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 16 Jul 2024 17:43:35 +0800
Subject: [PATCH 45/57] 1.6.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aea744b..20cc8eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "React input component",
   "keywords": [
     "react",

From e9d6848c41521548992608559019b1d6820f6022 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?=
 <7971419+crazyair@users.noreply.github.com>
Date: Thu, 18 Jul 2024 11:52:03 +0800
Subject: [PATCH 46/57] feat: Prevent long press of enter (#72)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Prevent long press of enter

* feat: test

* feat: 优化 if

* feat: keyLockRef
---
 src/Input.tsx        | 14 ++++++++++++--
 tests/index.test.tsx | 20 ++++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 261f14d..7ab86fb 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -23,6 +23,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     onBlur,
     onPressEnter,
     onKeyDown,
+    onKeyUp,
     prefixCls = 'rc-input',
     disabled,
     htmlSize,
@@ -42,6 +43,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
 
   const [focused, setFocused] = useState<boolean>(false);
   const compositionRef = useRef(false);
+  const keyLockRef = useRef(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
   const holderRef = useRef<HolderRef>(null);
@@ -155,10 +157,17 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (onPressEnter && e.key === 'Enter') {
+    onKeyDown?.(e);
+    if (onPressEnter && e.key === 'Enter' && !keyLockRef.current) {
+      keyLockRef.current = true;
       onPressEnter(e);
     }
-    onKeyDown?.(e);
+  };
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    onKeyUp?.(e);
+    if (e.key === 'Enter') {
+      keyLockRef.current = false;
+    }
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
@@ -215,6 +224,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         onFocus={handleFocus}
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
         className={clsx(
           prefixCls,
           {
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 8d104ab..59a5a26 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -40,6 +40,26 @@ describe('Input', () => {
     expect(onPressEnter).toHaveBeenCalled();
   });
 
+  it('should prevent long press of enter', () => {
+    const onKeyDown = jest.fn();
+    const onPressEnter = jest.fn();
+    const onKeyUp = jest.fn();
+    const { container } = render(
+      <Input
+        onKeyDown={onKeyDown}
+        onPressEnter={onPressEnter}
+        onKeyUp={onKeyUp}
+      />,
+    );
+    const inputEl = container.querySelector('input')!;
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    fireEvent.keyUp(inputEl, { key: 'Enter' });
+    expect(onKeyDown).toBeCalledTimes(2);
+    expect(onPressEnter).toBeCalledTimes(1);
+    expect(onKeyUp).toBeCalledTimes(1);
+  });
+
   it('should trigger onChange', () => {
     const onChange = jest.fn();
     const { container } = render(<Input onChange={onChange} />);

From d7df35a72fe6fed4a8692a33c62c6304e63345f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Jul 2024 11:56:17 +0800
Subject: [PATCH 47/57] 1.6.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 20cc8eb..6396dd4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "React input component",
   "keywords": [
     "react",

From fd9a863ad14cdb765e8074933c94dede646f60c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?=
 <7971419+crazyair@users.noreply.github.com>
Date: Thu, 18 Jul 2024 21:29:22 +0800
Subject: [PATCH 48/57] feat: sort (#73)

---
 src/Input.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 7ab86fb..c2a7e23 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -157,17 +157,17 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    onKeyDown?.(e);
     if (onPressEnter && e.key === 'Enter' && !keyLockRef.current) {
       keyLockRef.current = true;
       onPressEnter(e);
     }
+    onKeyDown?.(e);
   };
   const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    onKeyUp?.(e);
     if (e.key === 'Enter') {
       keyLockRef.current = false;
     }
+    onKeyUp?.(e);
   };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {

From a7392a99075860d0d75a2f37882c0b6402d52e29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Jul 2024 21:30:49 +0800
Subject: [PATCH 49/57] 1.6.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6396dd4..90c6ce9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "React input component",
   "keywords": [
     "react",

From 26d367d4ecc3305e90174b789ff5b4117f520804 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Wed, 7 Aug 2024 20:10:54 +0800
Subject: [PATCH 50/57] fix: fix error when pass onClear (#75)

* fix: fix error when pass onClear

* test: add test case
---
 src/Input.tsx        | 1 +
 tests/index.test.tsx | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/Input.tsx b/src/Input.tsx
index c2a7e23..c152f0d 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -214,6 +214,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         'htmlSize',
         'styles',
         'classNames',
+        'onClear',
       ],
     );
     return (
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 59a5a26..ea76fbe 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -415,6 +415,7 @@ describe('Input ref', () => {
 
   it('support onClear', () => {
     const onClear = jest.fn();
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const { container } = render(
       <Input onClear={onClear} defaultValue="test" allowClear />,
     );
@@ -422,6 +423,8 @@ describe('Input ref', () => {
       container.querySelector<HTMLSpanElement>('.rc-input-clear-icon')!,
     );
     expect(onClear).toHaveBeenCalled();
+    expect(errorSpy).not.toHaveBeenCalled();
+    errorSpy.mockRestore();
   });
 });
 

From e994ca9445f0396566baa39af5ce38d6c839be0d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 7 Aug 2024 20:18:15 +0800
Subject: [PATCH 51/57] 1.6.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 90c6ce9..c3d6f65 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "React input component",
   "keywords": [
     "react",

From 8658072c7fce52953a2c41c6bbd3f14399cb576e Mon Sep 17 00:00:00 2001
From: Avan <layouwen@gmail.com>
Date: Tue, 13 Aug 2024 18:20:49 +0800
Subject: [PATCH 52/57] test: use codecov/codecov-action (#76)

---
 .github/workflows/main.yml | 49 +++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 432a3fb..2097f2a 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,30 +1,26 @@
 name: CI
 
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
+on: ['push', 'pull_request']
 
 jobs:
   setup:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         with:
-          node-version: '12'
+          node-version: '20'
 
       - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only
+        run: npm i --package-lock-only --ignore-scripts
 
       - name: hack for singe file
         run: |
@@ -35,7 +31,7 @@ jobs:
 
       - name: cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -43,21 +39,21 @@ jobs:
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: npm ci
-  
+
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -66,21 +62,21 @@ jobs:
         run: npm run lint
 
     needs: setup
-  
+
   compile:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -89,26 +85,31 @@ jobs:
         run: npm run compile
 
     needs: setup
-  
+
   coverage:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: coverage
-        run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
+        run: npm test -- --coverage
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
 
     needs: setup

From 18598bf8b62e72e4a2828fffb7639c6c89fdc314 Mon Sep 17 00:00:00 2001
From: Muzzle886 <53635474+Muzzle886@users.noreply.github.com>
Date: Wed, 14 Aug 2024 17:48:59 +0800
Subject: [PATCH 53/57] docs: missing basePath (#77)

---
 .dumirc.ts   | 5 +++++
 package.json | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/.dumirc.ts b/.dumirc.ts
index a0e7004..498e3b6 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -1,5 +1,8 @@
 import { defineConfig } from 'dumi';
 
+const basePath = process.env.GH_PAGES ? '/input/' : '/';
+const publicPath = process.env.GH_PAGES ? '/input/' : '/';
+
 export default defineConfig({
   mfsu: false,
   favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
@@ -8,4 +11,6 @@ export default defineConfig({
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
   outputPath: '.doc',
+  base: basePath,
+  publicPath,
 });
diff --git a/package.json b/package.json
index c3d6f65..f847dde 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "gh-pages": "npm run docs:build && npm run docs:deploy",
+    "gh-pages": "GH_PAGES=1 npm run docs:build && npm run docs:deploy",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "postpublish": "npm run gh-pages",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",

From bfb80096d359c34b7197370c83f2209e4e1aae19 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 14 Aug 2024 17:50:13 +0800
Subject: [PATCH 54/57] Update README.md

---
 README.md | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 88daefe..e1bb3f6 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,30 @@
 # rc-input ⌨️
 
-[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![Dependencies][david-image]](david-url) [![DevDependencies][david-dev-image]][david-dev-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
+[![NPM version][npm-image]][npm-url]
+[![npm download][download-image]][download-url]
+[![build status][github-actions-image]][github-actions-url]
+[![Codecov][codecov-image]][codecov-url]
+[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-input.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-input
+[npm-url]: http://npmjs.org/package/rc-select
+[travis-image]: https://img.shields.io/travis/react-component/input/master?style=flat-square
+[travis-url]: https://travis-ci.com/react-component/input
 [github-actions-image]: https://github.com/react-component/input/workflows/CI/badge.svg
 [github-actions-url]: https://github.com/react-component/input/actions
 [codecov-image]: https://img.shields.io/codecov/c/github/react-component/input/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/react-component/input/branch/master
+[codecov-url]: https://app.codecov.io/gh/react-component/input
 [david-url]: https://david-dm.org/react-component/input
 [david-image]: https://david-dm.org/react-component/input/status.svg?style=flat-square
 [david-dev-url]: https://david-dm.org/react-component/input?type=dev
 [david-dev-image]: https://david-dm.org/react-component/input/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/rc-input.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-input
-[bundlephobia-url]: https://bundlephobia.com/result?p=rc-input
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-input
+[download-image]: https://img.shields.io/npm/dm/rc-select.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-select
+[bundlephobia-url]: https://bundlephobia.com/package/rc-select
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-select
+[dumi-url]: https://github.com/umijs/dumi
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 
 ## Install
 

From e3b6dd6f3470043962df23782f4064ee1ae52a23 Mon Sep 17 00:00:00 2001
From: Avan <layouwen@gmail.com>
Date: Sun, 25 Aug 2024 12:53:11 +0800
Subject: [PATCH 55/57] test: use unified github action yml (#78)

---
 .github/workflows/main.yml | 119 ++-----------------------------------
 .gitignore                 |   1 +
 bunfig.toml                |   2 +
 3 files changed, 8 insertions(+), 114 deletions(-)
 create mode 100644 bunfig.toml

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 2097f2a..5735e2d 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,115 +1,6 @@
-name: CI
-
-on: ['push', 'pull_request']
-
+name: ✅ test
+on: [push, pull_request]
 jobs:
-  setup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - name: cache package-lock.json
-        uses: actions/cache@v4
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
-
-      - name: hack for singe file
-        run: |
-          if [ ! -d "package-temp-dir" ]; then
-            mkdir package-temp-dir
-          fi
-          cp package-lock.json package-temp-dir
-
-      - name: cache node_modules
-        id: node_modules_cache_id
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: install
-        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
-
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v4
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: lint
-        run: npm run lint
-
-    needs: setup
-
-  compile:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v4
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: compile
-        run: npm run compile
-
-    needs: setup
-
-  coverage:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v4
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v4
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: coverage
-        run: npm test -- --coverage
-
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-
-    needs: setup
+  test:
+    uses: react-component/rc-test/.github/workflows/test.yml@main
+    secrets: inherit
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 28e90fc..d099b0d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,4 @@ dist/
 .dumi/tmp
 .dumi/tmp-production
 .node
+bun.lockb
diff --git a/bunfig.toml b/bunfig.toml
new file mode 100644
index 0000000..80d57b6
--- /dev/null
+++ b/bunfig.toml
@@ -0,0 +1,2 @@
+[install]
+peer = false
\ No newline at end of file

From f615ec62f6b2d3381f127a672fdaabc7608e1734 Mon Sep 17 00:00:00 2001
From: Roma Makarov <50619943+r0mm4k@users.noreply.github.com>
Date: Fri, 29 Nov 2024 10:39:03 +0300
Subject: [PATCH 56/57] fix: fix error when pass disabled and press enter.
 (#81)

* fix: fix error when pass disabled and press enter.

* Refactoring.

* fix error when press enter after trigger blur & add tests.

* Refactoring.

* Refactoring.
---
 src/Input.tsx        |  6 ++++++
 tests/index.test.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/Input.tsx b/src/Input.tsx
index c152f0d..4ce793f 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -94,6 +94,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   }));
 
   useEffect(() => {
+    if (keyLockRef.current) {
+      keyLockRef.current = false;
+    }
     setFocused((prev) => (prev && disabled ? false : prev));
   }, [disabled]);
 
@@ -176,6 +179,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (keyLockRef.current) {
+      keyLockRef.current = false;
+    }
     setFocused(false);
     onBlur?.(e);
   };
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index ea76fbe..6daf791 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -60,6 +60,34 @@ describe('Input', () => {
     expect(onKeyUp).toBeCalledTimes(1);
   });
 
+  it('should trigger onPressEnter after trigger onBlur', () => {
+    const onPressEnter = jest.fn();
+    const onBlur = jest.fn();
+    const { container } = render(
+      <Input onPressEnter={onPressEnter} onBlur={onBlur} />,
+    );
+    const inputEl = container.querySelector('input')!;
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    fireEvent.blur(inputEl);
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    expect(onBlur).toBeCalled();
+    expect(onPressEnter).toBeCalledTimes(2);
+  });
+
+  it('should trigger onPressEnter after disabled', () => {
+    const onPressEnter = jest.fn();
+    const { container, rerender } = render(
+      <Input onPressEnter={onPressEnter} />,
+    );
+    const inputEl = container.querySelector('input')!;
+    expect(inputEl.disabled).toBe(false);
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    rerender(<Input onPressEnter={onPressEnter} disabled={true} />);
+    expect(inputEl.disabled).toBe(true);
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    expect(onPressEnter).toBeCalledTimes(2);
+  });
+
   it('should trigger onChange', () => {
     const onChange = jest.fn();
     const { container } = render(<Input onChange={onChange} />);

From c0dd6ed8f8053eefd959cfb95dc499977469224c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 29 Nov 2024 15:43:58 +0800
Subject: [PATCH 57/57] 1.6.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f847dde..0912394 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-input",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "React input component",
   "keywords": [
     "react",