feat: support changeOnBlur (#596)

react-component · Oct 18, 2023 · 1155356 · 1155356
1 parent bb48d80
commit 1155356
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/docs/demo/simple.tsx b/docs/demo/simple.tsx
@@ -1,6 +1,6 @@
 /* eslint no-console:0 */
-import React from 'react';
 import InputNumber from 'rc-input-number';
+import React from 'react';
 import '../../assets/index.less';
 
 export default () => {
@@ -54,6 +54,17 @@ export default () => {
         max={99}
         defaultValue={33}
       />
+
+      <hr />
+      <h3>!changeOnBlur</h3>
+      <InputNumber
+        style={{ width: 100 }}
+        min={-9}
+        max={9}
+        defaultValue={10}
+        onChange={onChange}
+        changeOnBlur={false}
+      />
     </div>
   );
 };
diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
@@ -102,7 +102,11 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   // focusOnUpDown: boolean;
   // useTouch: boolean;
 
-  // size?: ISize;
+  /**
+   * Trigger change onBlur event.
+   * If disabled, user must press enter or click handler to confirm the value update
+   */
+  changeOnBlur?: boolean;
 }
 
 type InternalInputNumberProps = Omit<InputNumberProps, 'prefix' | 'suffix'>;
@@ -138,6 +142,8 @@ const InternalInputNumber = React.forwardRef(
       onPressEnter,
       onStep,
 
+      changeOnBlur = true,
+
       ...inputProps
     } = props;
 
@@ -513,7 +519,9 @@ const InternalInputNumber = React.forwardRef(
 
     // >>> Focus & Blur
     const onBlur = () => {
-      flushInputValue(false);
+      if (changeOnBlur) {
+        flushInputValue(false);
+      }
 
       setFocus(false);
 

diff --git a/tests/input.test.tsx b/tests/input.test.tsx
@@ -212,4 +212,15 @@ describe('InputNumber.Input', () => {
       expect(onChange).toHaveBeenLastCalledWith(null);
     });
   });
+
+  it('!changeOnBlur', () => {
+    const onChange = jest.fn();
+
+    const { container } = render(
+      <InputNumber min={0} max={9} defaultValue={10} changeOnBlur={false} onChange={onChange} />,
+    );
+
+    fireEvent.blur(container.querySelector('input'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
 });