Merge 76d2bf8 into 6d956de

README.md

@@ -232,13 +232,20 @@ online example: https://input-number.vercel.app/
           <td></td>
           <td>Specifies the inputmode of input</td>
         </tr>
+         <tr>
+          <td>maxLength</td>
+          <td>number</td>
+          <td></td>
+          <td>input max length</td>
+        </tr>
     </tbody>
 </table>
 
 ## Keyboard Navigation
-* When you hit the <kbd>⬆</kbd> or <kbd>⬇</kbd> key, the input value will be increased or decreased by `step`
-* With the <kbd>Shift</kbd> key (<kbd>Shift+⬆</kbd>, <kbd>Shift+⬇</kbd>), the input value will be changed by `10 * step`
-* With the <kbd>Ctrl</kbd> or <kbd>⌘</kbd> key (<kbd>Ctrl+⬆</kbd> or <kbd>⌘+⬆</kbd> or <kbd>Ctrl+⬇</kbd> or <kbd>⌘+⬇</kbd> ), the input value will be changed by `0.1 * step`
+
+- When you hit the <kbd>⬆</kbd> or <kbd>⬇</kbd> key, the input value will be increased or decreased by `step`
+- With the <kbd>Shift</kbd> key (<kbd>Shift+⬆</kbd>, <kbd>Shift+⬇</kbd>), the input value will be changed by `10 * step`
+- With the <kbd>Ctrl</kbd> or <kbd>⌘</kbd> key (<kbd>Ctrl+⬆</kbd> or <kbd>⌘+⬆</kbd> or <kbd>Ctrl+⬇</kbd> or <kbd>⌘+⬇</kbd> ), the input value will be changed by `0.1 * step`
 
 ## Test Case
 

src/InputNumber.tsx

@@ -67,6 +67,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   // useTouch: boolean;
 
   // size?: ISize;
+  maxLength?: number;
 }
 
 const InputNumber = React.forwardRef(
@@ -92,6 +93,7 @@ const InputNumber = React.forwardRef(
       formatter,
       precision,
       decimalSeparator,
+      maxLength,
 
       onChange,
       onInput,
@@ -336,8 +338,11 @@ const InputNumber = React.forwardRef(
     };
 
     // >>> Input
-    const onInternalInput: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const onInternalInput: React.ChangeEventHandler<HTMLInputElement> = e => {
       let inputStr = e.target.value;
+      if (maxLength > 0) {
+        inputStr = inputStr.slice(0, maxLength);
+      }
 
       // optimize for chinese input experience
       // https://github.com/ant-design/ant-design/issues/8196
@@ -404,7 +409,7 @@ const InputNumber = React.forwardRef(
       }
     };
 
-    const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
+    const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = event => {
       const { which } = event;
       userTypingRef.current = true;
 

tests/input.test.tsx

@@ -80,6 +80,25 @@ describe('InputNumber.Input', () => {
     expect(wrapper.getInputValue()).toEqual('');
   });
 
+  it('max length 3', () => {
+    const wrapper = prepareWrapper('333333', { maxLength: 3 }, true);
+    expect(wrapper.getInputValue()).toEqual('333');
+  });
+
+  it('max length 0', () => {
+    const wrapper = prepareWrapper('333333', { maxLength: 0 }, true);
+    expect(wrapper.getInputValue()).toEqual('333333');
+  });
+
+  it('control max length', () => {
+    const wrapper = mount(<InputNumber value={1234} maxLength={3} />);
+    wrapper.focusInput();
+    expect(wrapper.getInputValue()).toEqual('1234');
+
+    wrapper.changeValue('1234');
+    expect(wrapper.getInputValue()).toEqual('123');
+  });
+
   it('blur on default input', () => {
     const onChange = jest.fn();
     const wrapper = mount(<InputNumber onChange={onChange} />);