feat(input-otp): add onInput api for otp (#51289)

* feat(input-otp): add onInput api for otp

* feat(input-otp): add test case

* fix: test case error

* docs: add release  version

* docs: add release  version

* docs: update en-US document release version

* Update components/input/index.zh-CN.md

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: Jony J <82765353+aojunhao123@users.noreply.github.com>

* docs: update docs

* feat: modify onInput parameter type

* test: fix test case

* docs: update docs

* docs: update docs

---------

Signed-off-by: Jony J <82765353+aojunhao123@users.noreply.github.com>
Co-authored-by: lijianan <574980606@qq.com>

components/input/OTP/index.tsx

@@ -24,7 +24,8 @@ export interface OTPRef {
   nativeElement: HTMLDivElement;
 }
 
-export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface OTPProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput'> {
   prefixCls?: string;
   length?: number;
 
@@ -48,6 +49,8 @@ export interface OTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
   mask?: boolean | string;
 
   type?: React.HTMLInputTypeAttribute;
+
+  onInput?: (value: string[]) => void;
 }
 
 function strToArr(str: string) {
@@ -69,6 +72,7 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
     autoFocus,
     mask,
     type,
+    onInput,
     ...restProps
   } = props;
 
@@ -146,6 +150,10 @@ const OTP = React.forwardRef<OTPRef, OTPProps>((props, ref) => {
   const triggerValueCellsChange = useEvent((nextValueCells: string[]) => {
     setValueCells(nextValueCells);
 
+    if (onInput) {
+      onInput(nextValueCells);
+    }
+
     // Trigger if all cells are filled
     if (
       onChange &&

components/input/__tests__/otp.test.tsx

@@ -172,4 +172,23 @@ describe('Input.OTP', () => {
     const { container } = render(<OTP type="number" />);
     expect(container.querySelector('input')).toHaveAttribute('type', 'number');
   });
+
+  it('should call onInput with a string array when input changes', () => {
+    const onInput = jest.fn();
+    const { container } = render(<OTP length={4} onInput={onInput} />);
+
+    const inputs = Array.from(container.querySelectorAll('input'));
+
+    fireEvent.input(inputs[0], { target: { value: '1' } });
+    expect(onInput).toHaveBeenCalledWith(['1']);
+
+    fireEvent.input(inputs[2], { target: { value: '3' } });
+    expect(onInput).toHaveBeenCalledWith(['1', '', '3']);
+
+    fireEvent.input(inputs[1], { target: { value: '2' } });
+    expect(onInput).toHaveBeenCalledWith(['1', '2', '3']);
+
+    fireEvent.input(inputs[3], { target: { value: '4' } });
+    expect(onInput).toHaveBeenCalledWith(['1', '2', '3', '4']);
+  });
 });

components/input/demo/otp.tsx

@@ -11,8 +11,13 @@ const App: React.FC = () => {
     console.log('onChange:', text);
   };
 
+  const onInput: OTPProps['onInput'] = (value) => {
+    console.log('onInput:', value);
+  };
+
   const sharedProps: OTPProps = {
     onChange,
+    onInput,
   };
 
   return (

components/input/index.en-US.md

@@ -140,7 +140,8 @@ Added in `5.16.0`.
 | size | The size of the input box | `small` \| `middle` \| `large` | `middle` |  |
 | variant | Variants of Input | `outlined` \| `borderless` \| `filled` | `outlined` |  |
 | value | The input content value | string | - |  |
-| onChange | Trigger when all the fields are filled | function(value: string) | - |  |
+| onChange | Trigger when all the fields are filled | (value: string) => void | - |  |
+| onInput | Trigger when the input value changes | (value: string[]) => void | - | `5.22.0` |
 
 #### VisibilityToggle
 

components/input/index.zh-CN.md

@@ -141,7 +141,8 @@ interface CountConfig {
 | size | 输入框大小 | `small` \| `middle` \| `large` | `middle` |  |
 | variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` |  |
 | value | 输入框内容 | string | - |  |
-| onChange | 当输入框内容全部填充时触发回调 | function(value: string) | - |  |
+| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - |  |
+| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | `5.22.0` |
 
 #### VisibilityToggle
 

package.json

@@ -344,4 +344,4 @@
   "tnpm": {
     "mode": "npm"
   }
-}
+}