Merge pull request #834 from illacloud/fix/number-input-bug

Fix/number input bug
illacloud · Dec 20, 2023 · 0ef0958 · 0ef0958
2 parents 358d112 + cc87319
commit 0ef0958
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/packages/input-number/src/input-number.tsx b/packages/input-number/src/input-number.tsx
@@ -3,7 +3,7 @@ import { InputNumberProps } from "./interface"
 import { Input } from "@illa-design/input"
 import { DownIcon, MinusIcon, PlusIcon, UpIcon } from "@illa-design/icon"
 import { Space } from "@illa-design/space"
-import { isNumber, useMergeValue } from "@illa-design/system"
+import { isNumber, mergeRefs, useMergeValue } from "@illa-design/system"
 import {
   applyActionIconStyle,
   applyControlBlockStyle,
@@ -33,6 +33,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       defaultValue,
       value,
       icons,
+      inputRef,
       formatter,
       parser,
       onChange,
@@ -44,7 +45,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
       defaultValue,
     })
 
-    const inputRef =
+    const currentInputRef =
       useRef<HTMLInputElement>() as MutableRefObject<HTMLInputElement>
 
     const plusStep = useCallback((): void => {
@@ -103,7 +104,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
         <div
           css={applyControlBlockStyle("up", size)}
           onClick={() => {
-            inputRef.current.focus()
+            currentInputRef.current.focus()
             plusStep()
           }}
         >
@@ -112,7 +113,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
         <div
           css={applyControlBlockStyle("bottom", size)}
           onClick={() => {
-            inputRef.current.focus()
+            currentInputRef.current.focus()
             minusStep()
           }}
         >
@@ -148,7 +149,7 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
     return (
       <Input
         ref={ref}
-        inputRef={inputRef}
+        inputRef={mergeRefs(currentInputRef, inputRef)}
         _css={hoverControlStyle}
         size={size}
         value={finalValue}
@@ -167,8 +168,8 @@ export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
         }}
         onPressEnter={() => {
           const rawValue = parser
-            ? parser(inputRef.current.value)
-            : inputRef.current.value
+            ? parser(currentInputRef.current.value)
+            : currentInputRef.current.value
 
           const dealNum = dealNumber(rawValue)
 

diff --git a/packages/input-number/src/interface.ts b/packages/input-number/src/interface.ts
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, ReactNode, SyntheticEvent } from "react"
+import { InputHTMLAttributes, ReactNode, Ref, SyntheticEvent } from "react"
 import { BoxProps } from "@illa-design/theme"
 
 export type InputNumberSize = "small" | "medium" | "large"
@@ -47,6 +47,7 @@ export interface InputNumberProps
     plus?: ReactNode
     minus?: ReactNode
   }
+  inputRef?: Ref<HTMLInputElement>
   onChange?: (value: number | undefined) => void
   onKeyDown?: (e: SyntheticEvent) => void
   parser?: (value: number | string) => number