fix: support dynamic formatter (#595)

react-component · Oct 13, 2023 · 4453c15 · 4453c15
1 parent ebd65ca
commit 4453c15
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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',
+      );
+    });
+  });
 });