Fix input

Author: belltalion

.changeset/breezy-bees-help.md

@@ -0,0 +1,5 @@
+---
+'@devup-ui/components': patch
+---
+
+Fix input to controlled

packages/components/src/components/Input/Controlled.tsx

@@ -5,5 +5,11 @@ import { Input } from '.'
 export function Controlled() {
   const [value, setValue] = useState('')
 
-  return <Input onChange={(e) => setValue(e.target.value)} value={value} />
+  return (
+    <Input
+      onChange={(e) => setValue(e.target.value)}
+      onClear={() => setValue('')}
+      value={value}
+    />
+  )
 }

packages/components/src/components/Input/index.tsx

@@ -38,7 +38,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
 }
 
 export function Input({
-  defaultValue,
+  defaultValue = '',
   value: valueProp,
   onChange: onChangeProp,
   typography,
@@ -48,22 +48,26 @@ export function Input({
   icon,
   colors,
   disabled,
-  className,
-  classNames,
+  className = '',
+  classNames = {},
   ref,
   onClear,
   ...props
 }: InputProps) {
-  const [value, setValue] = useState(defaultValue || '')
+  const [value, setValue] = useState(defaultValue)
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value)
     onChangeProp?.(e)
   }
+
   const handleClear = () => {
     setValue('')
     onClear?.()
   }
-  const clearButtonVisible = value && !disabled && allowClear
+
+  const finalValue = valueProp ?? value
+
+  const clearButtonVisible = finalValue && !disabled && allowClear
 
   return (
     <Box
@@ -122,7 +126,7 @@ export function Input({
         borderRadius="8px"
         borderStyle="solid"
         borderWidth="1px"
-        className={`${className || ''} ${classNames?.input || ''}`.trim()}
+        className={`${className} ${classNames.input}`.trim()}
         disabled={disabled}
         onChange={handleChange}
         pl={icon ? '36px' : '12px'}
@@ -142,7 +146,7 @@ export function Input({
         }}
         transition="all 0.1s ease-in-out"
         typography={typography}
-        value={valueProp ?? value}
+        value={finalValue}
         {...props}
       />
       {clearButtonVisible && <ClearButton onClick={handleClear} />}