TEC-4591: Fix input controlled component error (#31)

vissimo-group · Aug 21, 2024 · 412a660 · 412a660
1 parent c68ef73
commit 412a660
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chardonnay",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "A mobile first frontend framework made with wine",
   "homepage": "https://vissimo-group.github.io/chardonnay/",
   "main": "./dist/index.js",

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -25,19 +25,21 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     iconLeft,
     iconRight,
     mask,
+    value,
+    onChange,
     ...restProps
   } = props
 
-  const [inputValue, setInputValue] = useState<string | undefined>()
+  const [inputValue, setInputValue] = useState<string>('')
   const inputRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
-    if (props.value) {
-      setInputValue(props.value)
+    if (value) {
+      setInputValue(value)
     }
-  }, [])
+  }, [value])
 
-  useImperativeHandle(ref, () => inputRef.current!, [inputRef.current])
+  useImperativeHandle(ref, () => inputRef.current!, [])
 
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -46,11 +48,11 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       const valueMask = mask ? maskInput(valueUnMask, mask) : newValue
 
       setInputValue(valueMask)
-      if (props.onChange) {
-        props.onChange(event)
+      if (onChange) {
+        onChange(event)
       }
     },
-    [mask, props.onChange],
+    [mask, onChange],
   )
 
   return (