From 19e97c9106ab2ade134d4b8f4a45e3e118c14984 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 19 Jul 2023 14:18:55 +0800
Subject: [PATCH] fix: uncontrolled mode userTyping input not correct (#587)

---
 .husky/pre-commit        |  4 ---
 src/InputNumber.tsx      |  2 ++
 tests/formatter.test.tsx | 63 ++++++++++++++++++++++++----------------
 3 files changed, 40 insertions(+), 29 deletions(-)
 delete mode 100755 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
deleted file mode 100755
index 7d0de5da..00000000
--- a/.husky/pre-commit
+++ /dev/null
@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-lint-staged
diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
index 15a7673c..042589f6 100644
--- a/src/InputNumber.tsx
+++ b/src/InputNumber.tsx
@@ -373,6 +373,8 @@ const InternalInputNumber = React.forwardRef(
       recordCursor();
 
       // Update inputValue in case input can not parse as number
+      // Refresh ref value immediately since it may used by formatter
+      inputValueRef.current = inputStr;
       setInternalInputValue(inputStr);
 
       // Parse number
diff --git a/tests/formatter.test.tsx b/tests/formatter.test.tsx
index 6915b4fc..b62d97e1 100644
--- a/tests/formatter.test.tsx
+++ b/tests/formatter.test.tsx
@@ -1,17 +1,19 @@
+import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
-import { render, fireEvent } from './util/wrapper';
 import InputNumber from '../src';
-import KeyCode from 'rc-util/lib/KeyCode';
+import { fireEvent, render } from './util/wrapper';
 
 describe('InputNumber.Formatter', () => {
   it('formatter on default', () => {
-    const { container } = render(<InputNumber step={1} value={5} formatter={num => `$ ${num}`} />);
+    const { container } = render(
+      <InputNumber step={1} value={5} formatter={(num) => `$ ${num}`} />,
+    );
     const input = container.querySelector('input');
     expect(input.value).toEqual('$ 5');
   });
 
   it('formatter on mousedown', () => {
-    const { container } = render(<InputNumber defaultValue={5} formatter={num => `$ ${num}`} />);
+    const { container } = render(<InputNumber defaultValue={5} formatter={(num) => `$ ${num}`} />);
     const input = container.querySelector('input');
     fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
     expect(input.value).toEqual('$ 6');
@@ -23,7 +25,7 @@ describe('InputNumber.Formatter', () => {
   it('formatter on keydown', () => {
     const onChange = jest.fn();
     const { container } = render(
-      <InputNumber defaultValue={5} onChange={onChange} formatter={num => `$ ${num} ¥`} />,
+      <InputNumber defaultValue={5} onChange={onChange} formatter={(num) => `$ ${num} ¥`} />,
     );
 
     const input = container.querySelector('input');
@@ -51,7 +53,7 @@ describe('InputNumber.Formatter', () => {
   it('formatter on direct input', () => {
     const onChange = jest.fn();
     const { container } = render(
-      <InputNumber defaultValue={5} formatter={num => `$ ${num}`} onChange={onChange} />,
+      <InputNumber defaultValue={5} formatter={(num) => `$ ${num}`} onChange={onChange} />,
     );
     const input = container.querySelector('input');
     fireEvent.focus(input);
@@ -66,8 +68,8 @@ describe('InputNumber.Formatter', () => {
     const { container } = render(
       <InputNumber
         defaultValue={5}
-        formatter={num => `$ ${num} boeing 737`}
-        parser={num => num.toString().split(' ')[1]}
+        formatter={(num) => `$ ${num} boeing 737`}
+        parser={(num) => num.toString().split(' ')[1]}
         onChange={onChange}
       />,
     );
@@ -115,7 +117,7 @@ describe('InputNumber.Formatter', () => {
 
             return String(num);
           }}
-          parser={num => {
+          parser={(num) => {
             numValue = num;
             return Number(num);
           }}
@@ -134,22 +136,33 @@ describe('InputNumber.Formatter', () => {
     fireEvent.blur(input);
     expect(input.value).toEqual('0');
   });
-});
 
-it('in strictMode render correct defaultValue ', () => {
-  const Demo = () => {
-    return (
-      <React.StrictMode>
-        <div>
-          <InputNumber defaultValue={5}  formatter={num => `$ ${num}`} />
-        </div>
-      </React.StrictMode>
-    );
-  };
-  const { container } = render(<Demo />);
-  const input = container.querySelector('input');
-  expect(input.value).toEqual('$ 5');
+  it('in strictMode render correct defaultValue ', () => {
+    const Demo = () => {
+      return (
+        <React.StrictMode>
+          <div>
+            <InputNumber defaultValue={5} formatter={(num) => `$ ${num}`} />
+          </div>
+        </React.StrictMode>
+      );
+    };
+    const { container } = render(<Demo />);
+    const input = container.querySelector('input');
+    expect(input.value).toEqual('$ 5');
 
-  fireEvent.change(input, { target: { value: 3 } });
-  expect(input.value).toEqual('$ 3')
+    fireEvent.change(input, { target: { value: 3 } });
+    expect(input.value).toEqual('$ 3');
+  });
+
+  it('formatter info should be correct', () => {
+    const formatter = jest.fn();
+    const { container } = render(<InputNumber formatter={formatter} />);
+
+    formatter.mockReset();
+
+    fireEvent.change(container.querySelector('input'), { target: { value: '1' } });
+    expect(formatter).toHaveBeenCalledTimes(1);
+    expect(formatter).toHaveBeenCalledWith('1', { userTyping: true, input: '1' });
+  });
 });