fix: Safari of input IME (#512)

Author: zombieJ

package.json

@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "13.3.0",
+    "@testing-library/react": "^13.3.0",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.0",

src/InputNumber.tsx

@@ -444,6 +444,11 @@ const InputNumber = React.forwardRef(
       }
     };
 
+    // Solve the issue of the event triggering sequence when entering numbers in chinese input (Safari)
+    const onBeforeInput = () => {
+      userTypingRef.current = true;
+    };
+
     const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
       const { which, shiftKey } = event;
       userTypingRef.current = true;
@@ -536,6 +541,7 @@ const InputNumber = React.forwardRef(
         onKeyUp={onKeyUp}
         onCompositionStart={onCompositionStart}
         onCompositionEnd={onCompositionEnd}
+        onBeforeInput={onBeforeInput}
       >
         {controls && (
           <StepHandler

src/index.ts

@@ -1,5 +1,5 @@
 import InputNumber, { InputNumberProps } from './InputNumber';
 
-export { InputNumberProps };
+export type { InputNumberProps };
 
 export default InputNumber;

tests/precision.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import KeyCode from 'rc-util/lib/KeyCode';
+import InputNumber from '../src';
+
+describe('InputNumber.Precision', () => {
+  // https://github.com/react-component/input-number/issues/506
+  it('Safari bug of input', async () => {
+    const Demo = () => {
+      const [value, setValue] = React.useState<string | number>(null);
+
+      return <InputNumber precision={2} value={value} onChange={setValue} />;
+    };
+
+    const { container } = render(<Demo />);
+    const input = container.querySelector('input');
+
+    // React use SyntheticEvent to handle `onBeforeInput`, let's mock this
+    fireEvent.keyPress(input, {
+      which: KeyCode.TWO,
+      keyCode: KeyCode.TWO,
+      char: '2',
+    });
+
+    fireEvent.change(input, {
+      target: {
+        value: '2',
+      },
+    });
+
+    expect(input.value).toEqual('2');
+  });
+});