fix: Control dynamic change value when user typing should work (#362)

* test: Test driven

* test: Test driven

* fix: check diff logic

Author: zombieJ

docs/demo/debug.md

@@ -0,0 +1,3 @@
+## debug
+
+<code src="../examples/debug.tsx">

docs/examples/debug.tsx

@@ -0,0 +1,40 @@
+/* eslint no-console:0 */
+import React, { useEffect } from 'react';
+import InputNumber from 'rc-input-number';
+import '../../assets/index.less';
+
+export default () => {
+  const [value, setValue] = React.useState<string | number>(5);
+
+  useEffect(() => {
+    function keyDown(event: KeyboardEvent) {
+      if ((event.ctrlKey === true || event.metaKey) && event.keyCode === 90) {
+        setValue(3);
+      }
+    }
+    document.addEventListener('keydown', keyDown);
+
+    return () => document.removeEventListener('keydown', keyDown);
+  }, []);
+
+  return (
+    <>
+      <InputNumber
+        style={{ width: 100 }}
+        onChange={(nextValue) => {
+          console.log('Change:', nextValue);
+          setValue(nextValue);
+        }}
+        value={value}
+      />
+      {value}
+      <button
+        onClick={() => {
+          setValue(99);
+        }}
+      >
+        Change
+      </button>
+    </>
+  );
+};

src/InputNumber.tsx

@@ -477,9 +477,11 @@ const InputNumber = React.forwardRef(
       const newValue = getMiniDecimal(value);
       setDecimalValue(newValue);
 
+      const currentParsedValue = getMiniDecimal(mergedParser(inputValue));
+
       // When user typing from `1.2` to `1.`, we should not convert to `1` immediately.
       // But let it go if user set `formatter`
-      if (newValue.isNaN() || !userTypingRef.current || formatter) {
+      if (!newValue.equals(currentParsedValue) || !userTypingRef.current || formatter) {
         // Update value as effect
         setInputValue(newValue, userTypingRef.current);
       }

tests/github.test.tsx

@@ -475,4 +475,30 @@ describe('InputNumber.Github', () => {
 
     expect(wrapper.getInputValue()).toEqual('-0');
   });
+
+  // https://github.com/ant-design/ant-design/issues/32274
+  it('global modify when typing', () => {
+    const Demo = ({ value }: { value?: number }) => {
+      const [val, setVal] = React.useState<string | number>(7);
+
+      React.useEffect(() => {
+        if (value) {
+          setVal(value);
+        }
+      }, [value]);
+
+      return <InputNumber value={val} onChange={setVal} />;
+    };
+    const wrapper = mount(<Demo />);
+
+    // Click
+    wrapper.find('.rc-input-number-handler-up').simulate('mouseDown');
+    expect(wrapper.find('input').prop('value')).toEqual('8');
+
+    // Keyboard change
+    wrapper.find('input').simulate('keyDown');
+    wrapper.setProps({ value: 3 });
+    wrapper.update();
+    expect(wrapper.find('input').prop('value')).toEqual('3');
+  });
 });