fix(InputNumber): 修复部分小数点数字无法输入问题 (#2264)

* fix(input-number): can not input some decimal numbers

* fix: update snapshots

* chore: update snapshot

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>

src/input-number/_example/center.jsx

@@ -45,7 +45,7 @@ export default function InputNumberExample() {
       <InputNumber
         value={decimalValue}
         onChange={setDecimalValue}
-        decimalPlaces={0}
+        // decimalPlaces={0}
         max={5}
         autoWidth
       />

src/input-number/_example/format.jsx

@@ -14,12 +14,14 @@ export default function InputNumberExample() {
         format={(value) => `${value} %`}
         value={value}
         onChange={setValue}
+        style={{ width: 250 }}
       />
       <InputNumber
         decimalPlaces={2}
         format={(_, { fixedNumber }) => `${fixedNumber} %`}
         value={value1}
         onChange={setValue1}
+        style={{ width: 250 }}
       />
     </Space>
   );

src/input-number/input-number.en-US.md

@@ -29,7 +29,7 @@ tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](htt
 value | String / Number | - | Typescript：`T` `type InputNumberValue = number \| string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts) | N
 defaultValue | String / Number | - | uncontrolled property。Typescript：`T` `type InputNumberValue = number \| string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts) | N
 onBlur | Function |  | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/> | N
-onChange | Function |  | Typescript：`(value: T, context: ChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear'`<br/> | N
+onChange | Function |  | Typescript：`(value: T, context: ChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
 onEnter | Function |  | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
 onFocus | Function |  | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/> | N
 onKeydown | Function |  | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N

src/input-number/input-number.md

@@ -29,7 +29,7 @@ tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈
 value | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。TS 类型：`T` `type InputNumberValue = number \| string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts) | N
 defaultValue | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。非受控属性。TS 类型：`T` `type InputNumberValue = number \| string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts) | N
 onBlur | Function |  | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/>失去焦点时触发 | N
-onChange | Function |  | TS 类型：`(value: T, context: ChangeContext) => void`<br/>值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear'`<br/> | N
+onChange | Function |  | TS 类型：`(value: T, context: ChangeContext) => void`<br/>值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
 onEnter | Function |  | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/>回车键按下时触发 | N
 onFocus | Function |  | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/>获取焦点时触发 | N
 onKeydown | Function |  | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/>键盘按下时触发 | N

src/input-number/type.ts

@@ -6,7 +6,7 @@
 
 import { InputProps } from '../input';
 import { TNode } from '../common';
-import { MouseEvent, KeyboardEvent, FocusEvent, FormEvent } from 'react';
+import { MouseEvent, KeyboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
 
 export interface TdInputNumberProps<T = InputNumberValue> {
   /**
@@ -142,10 +142,11 @@ export type InputNumberValue = number | string;
 export interface ChangeContext {
   type: ChangeSource;
   e:
-    | FormEvent<HTMLDivElement>
+    | FormEvent<HTMLInputElement>
     | MouseEvent<HTMLDivElement | SVGElement>
     | FocusEvent<HTMLDivElement>
-    | KeyboardEvent<HTMLDivElement>;
+    | KeyboardEvent<HTMLDivElement>
+    | CompositionEvent<HTMLDivElement>;
 }
 
-export type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | 'clear';
+export type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | 'clear' | 'props';

src/input-number/useInputNumber.tsx

@@ -9,10 +9,12 @@ import {
   canAddNumber,
   canInputNumber,
   canReduceNumber,
-  formatToNumber,
+  formatUnCompleteNumber,
+  canSetValue,
   getMaxOrMinValidateResult,
   getStepValue,
   formatThousandths,
+  largeNumberToFixed,
 } from '../_common/js/input-number/number';
 import { InputProps } from '../input';
 
@@ -50,9 +52,10 @@ export default function useInputNumber<T extends InputNumberValue = InputNumberV
     if (!value && value !== 0) return '';
     let inputStr = value || value === 0 ? String(value) : '';
     if (!inputRef.current.currentElement.contains?.(document.activeElement)) {
-      const num = formatToNumber(inputStr, {
+      const num = formatUnCompleteNumber(inputStr, {
         decimalPlaces,
         largeNumber,
+        isToFixed: true,
       });
       inputStr = num || num === 0 ? String(num) : '';
       if (props.format) {
@@ -64,7 +67,23 @@ export default function useInputNumber<T extends InputNumberValue = InputNumberV
 
   useEffect(() => {
     const inputValue = [undefined, null].includes(tValue) ? '' : String(tValue);
-    setUserInput(getUserInput(inputValue));
+    // userInput.value 为非合法数字，则表示用户正在输入，此时无需处理
+    if (!largeNumber && !Number.isNaN(userInput)) {
+      if (parseFloat(userInput) !== tValue) {
+        setUserInput(getUserInput(inputValue));
+      }
+      const fixedNumber = Number(largeNumberToFixed(inputValue, decimalPlaces, largeNumber));
+      if (decimalPlaces !== undefined && fixedNumber !== tValue) {
+        onChange(fixedNumber as T, { type: 'props', e: undefined });
+      }
+    }
+    if (largeNumber) {
+      const tmpUserInput = getUserInput(inputValue);
+      setUserInput(tmpUserInput);
+      if (decimalPlaces !== undefined && largeNumberToFixed(inputValue, decimalPlaces, largeNumber) !== tValue) {
+        onChange(tmpUserInput as T, { type: 'props', e: undefined });
+      }
+    }
     // eslint-disable-next-line
   }, [tValue]);
 
@@ -118,25 +137,22 @@ export default function useInputNumber<T extends InputNumberValue = InputNumberV
   };
 
   // 1.2 -> 1. -> 1
-  const onInnerInputChange: InputProps['onChange'] = (val, { e }) => {
-    // eslint-disable-next-line no-param-reassign
-    val = formatThousandths(val); // 处理千分位
+  const onInnerInputChange: InputProps['onChange'] = (inputValue, { e }) => {
+    // 处理千分位
+    const val = formatThousandths(inputValue);
     if (!canInputNumber(val, largeNumber)) return;
-    if (props.largeNumber) {
+
+    setUserInput(val);
+
+    if (largeNumber) {
       onChange(val as T, { type: 'input', e });
       return;
     }
-    // specialCode 新增或删除这些字符时不触发 change 事件
-    const isDelete = (e as any).nativeEvent.inputType === 'deleteContentBackward';
-    const inputSpecialCode = specialCode.includes(val.slice(-1)) || /\.\d*0+$/.test(val);
-    const deleteSpecialCode = isDelete && specialCode.includes(String(userInput).slice(-1));
-    if ((!isNaN(Number(val)) && !inputSpecialCode) || deleteSpecialCode) {
+
+    if (canSetValue(String(val), Number(tValue))) {
       const newVal = val === '' ? undefined : Number(val);
       onChange(newVal as T, { type: 'input', e });
     }
-    if (inputSpecialCode || deleteSpecialCode) {
-      setUserInput(val);
-    }
   };
 
   const handleBlur = (value: string, ctx: { e: React.FocusEvent<HTMLDivElement, Element> }) => {
@@ -156,12 +172,12 @@ export default function useInputNumber<T extends InputNumberValue = InputNumberV
         return;
       }
     }
-    setUserInput(getUserInput(value));
-    const newValue = formatToNumber(value, {
+    const newValue = formatUnCompleteNumber(value, {
       decimalPlaces,
       largeNumber,
     });
-    if ((newValue !== value && String(newValue) !== value) || Number(newValue) !== Number(tValue)) {
+    setUserInput(getUserInput(newValue));
+    if (newValue !== tValue) {
       onChange(newValue as T, { type: 'blur', e: ctx.e });
     }
     props.onBlur?.(newValue, ctx);
@@ -195,7 +211,7 @@ export default function useInputNumber<T extends InputNumberValue = InputNumberV
 
   const handleEnter = (value: string, ctx: { e: React.KeyboardEvent<HTMLDivElement> }) => {
     setUserInput(getUserInput(value));
-    const newValue = formatToNumber(value, {
+    const newValue = formatUnCompleteNumber(value, {
       decimalPlaces: props.decimalPlaces,
       largeNumber: props.largeNumber,
     });

test/snap/__snapshots__/csr.test.jsx.snap

@@ -120305,7 +120305,7 @@ exports[`csr snapshot test > csr test src/input-number/_example/center.jsx 1`] =
             </button>
             <div
               class="t-input__wrap t-input--auto-width"
-              value="3"
+              value="3.41"
             >
               <div
                 class="t-input t-align-center"
@@ -120315,12 +120315,12 @@ exports[`csr snapshot test > csr test src/input-number/_example/center.jsx 1`] =
                   class="t-input__inner"
                   placeholder="please enter"
                   type="text"
-                  value="3"
+                  value="3.41"
                 />
                 <span
                   class="t-input__input-pre"
                 >
-                  3
+                  3.41
                 </span>
               </div>
             </div>
@@ -120510,7 +120510,7 @@ exports[`csr snapshot test > csr test src/input-number/_example/center.jsx 1`] =
           </button>
           <div
             class="t-input__wrap t-input--auto-width"
-            value="3"
+            value="3.41"
           >
             <div
               class="t-input t-align-center"
@@ -120520,12 +120520,12 @@ exports[`csr snapshot test > csr test src/input-number/_example/center.jsx 1`] =
                 class="t-input__inner"
                 placeholder="please enter"
                 type="text"
-                value="3"
+                value="3.41"
               />
               <span
                 class="t-input__input-pre"
               >
-                3
+                3.41
               </span>
             </div>
           </div>
@@ -120942,6 +120942,7 @@ exports[`csr snapshot test > csr test src/input-number/_example/format.jsx 1`] =
         >
           <div
             class="t-input-number t-size-m t-input-number--row"
+            style="width: 250px;"
           >
             <button
               class="t-input-number__decrease t-button t-button--theme-default t-button--variant-outline t-button--shape-square"
@@ -121002,6 +121003,7 @@ exports[`csr snapshot test > csr test src/input-number/_example/format.jsx 1`] =
         >
           <div
             class="t-input-number t-size-m t-input-number--row"
+            style="width: 250px;"
           >
             <button
               class="t-input-number__decrease t-button t-button--theme-default t-button--variant-outline t-button--shape-square"
@@ -121070,6 +121072,7 @@ exports[`csr snapshot test > csr test src/input-number/_example/format.jsx 1`] =
       >
         <div
           class="t-input-number t-size-m t-input-number--row"
+          style="width: 250px;"
         >
           <button
             class="t-input-number__decrease t-button t-button--theme-default t-button--variant-outline t-button--shape-square"
@@ -121130,6 +121133,7 @@ exports[`csr snapshot test > csr test src/input-number/_example/format.jsx 1`] =
       >
         <div
           class="t-input-number t-size-m t-input-number--row"
+          style="width: 250px;"
         >
           <button
             class="t-input-number__decrease t-button t-button--theme-default t-button--variant-outline t-button--shape-square"