Merge pull request #296 from belltalion/fix-input-clear

Fix input clear

Author: belltalion

.changeset/late-plants-bet.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Add onClear prop in input component

packages/components/src/components/Input/__tests__/index.browser.test.tsx

@@ -155,6 +155,16 @@ describe('Input', () => {
     })
     expect(onChange).toHaveBeenCalledWith(expect.any(Object))
   })
+
+  it('should call onClear props when click clear button', () => {
+    const onClear = vi.fn()
+    const { container } = render(<Input onClear={onClear} />)
+    fireEvent.change(container.querySelector('input')!, {
+      target: { value: 'test' },
+    })
+    fireEvent.click(container.querySelector('[aria-label="clear-button"]')!)
+    expect(onClear).toHaveBeenCalled()
+  })
 })
 
 describe('Controlled Input', () => {

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

@@ -21,6 +21,7 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
     icon?: string
     errorMessage?: string
   }
+  onClear?: () => void
   colors?: {
     primary?: string
     error?: string
@@ -49,6 +50,7 @@ export function Input({
   className,
   classNames,
   ref,
+  onClear,
   ...props
 }: InputProps) {
   const [value, setValue] = useState(defaultValue || '')
@@ -58,6 +60,7 @@ export function Input({
   }
   const handleClear = () => {
     setValue('')
+    onClear?.()
   }
   const clearButtonVisible = value && !disabled && allowClear