From 4453c1529c0505fc6330103ea72254cf72eba42e 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: Fri, 13 Oct 2023 15:32:18 +0800
Subject: [PATCH] fix: support dynamic formatter (#595)

---
 src/InputNumber.tsx      |  4 ++--
 tests/formatter.test.tsx | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
index 5e1755e2..dd9a28bc 100644
--- a/src/InputNumber.tsx
+++ b/src/InputNumber.tsx
@@ -521,12 +521,12 @@ const InternalInputNumber = React.forwardRef(
     };
 
     // ========================== Controlled ==========================
-    // Input by precision
+    // Input by precision & formatter
     useLayoutUpdateEffect(() => {
       if (!decimalValue.isInvalidate()) {
         setInputValue(decimalValue, false);
       }
-    }, [precision]);
+    }, [precision, formatter]);
 
     // Input by value
     useLayoutUpdateEffect(() => {
diff --git a/tests/formatter.test.tsx b/tests/formatter.test.tsx
index b62d97e1..c5419769 100644
--- a/tests/formatter.test.tsx
+++ b/tests/formatter.test.tsx
@@ -165,4 +165,36 @@ describe('InputNumber.Formatter', () => {
     expect(formatter).toHaveBeenCalledTimes(1);
     expect(formatter).toHaveBeenCalledWith('1', { userTyping: true, input: '1' });
   });
+
+  describe('dynamic formatter', () => {
+    it('uncontrolled', () => {
+      const { container, rerender } = render(
+        <InputNumber defaultValue={93} formatter={(val) => `$${val}`} />,
+      );
+
+      expect(container.querySelector<HTMLInputElement>('.rc-input-number-input').value).toEqual(
+        '$93',
+      );
+
+      rerender(<InputNumber defaultValue={93} formatter={(val) => `*${val}`} />);
+      expect(container.querySelector<HTMLInputElement>('.rc-input-number-input').value).toEqual(
+        '*93',
+      );
+    });
+
+    it('controlled', () => {
+      const { container, rerender } = render(
+        <InputNumber value={510} formatter={(val) => `$${val}`} />,
+      );
+
+      expect(container.querySelector<HTMLInputElement>('.rc-input-number-input').value).toEqual(
+        '$510',
+      );
+
+      rerender(<InputNumber value={510} formatter={(val) => `*${val}`} />);
+      expect(container.querySelector<HTMLInputElement>('.rc-input-number-input').value).toEqual(
+        '*510',
+      );
+    });
+  });
 });