Merge pull request #424 from belltalion/fix-input-value

Fix input handleClear

Author: belltalion

.changeset/ten-apples-check.md

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

packages/components/package.json

@@ -57,7 +57,7 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "storybook": "^9.1.10",
     "typescript": "^5.9.3",
-    "vite": "^7.1.7",
+    "vite": "7.1.10",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4"
   },

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

@@ -114,6 +114,7 @@ exports[`Input > should pass props to ClearButton component 1`] = `
   <button
     aria-label="clear-button"
     class="align-items-0-center--1 background-0-var(--negative20,light-dark(#0003,#FFF6))--1 border-0-none--1 border-radius-0-50%--1 height-0-20px--1 width-0-20px--1 color-0-var(--base,light-dark(#FFF,#000))--1 cursor-0-pointer--1 display-0-flex--1 justify-content-0-center--1 padding-0-2px--1 position-0-absolute--1 right-0-12px--1 top-0-50%--1 transform-0-translateY(-50%)--1 "
+    type="button"
   >
     <svg
       fill="none"

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

@@ -165,6 +165,7 @@ describe('Input', () => {
     })
     fireEvent.click(container.querySelector('[aria-label="clear-button"]')!)
     expect(onClear).toHaveBeenCalled()
+    expect(container.querySelector('input')!.value).toBe('')
   })
 })
 
@@ -181,4 +182,13 @@ describe('Controlled Input', () => {
     })
     expect(container.querySelector('input')!.value).toBe('test')
   })
+
+  it('should clear value when clear button is clicked', () => {
+    const { container } = render(<Controlled />)
+    fireEvent.change(container.querySelector('input')!, {
+      target: { value: 'test' },
+    })
+    fireEvent.click(container.querySelector('[aria-label="clear-button"]')!)
+    expect(container.querySelector('input')!.value).toBe('')
+  })
 })

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

@@ -50,7 +50,7 @@ export function Input({
   disabled,
   className,
   classNames,
-  ref,
+  readOnly,
   onClear,
   ...props
 }: InputProps) {
@@ -63,12 +63,16 @@ export function Input({
 
   const handleClear = () => {
     setValue('')
+    onChangeProp?.({
+      target: { value: '' },
+    } as React.ChangeEvent<HTMLInputElement>)
     onClear?.()
   }
 
   const innerValue = valueProp ?? value
 
-  const clearButtonVisible = !!innerValue && !disabled && allowClear
+  const clearButtonVisible =
+    !!innerValue && !disabled && allowClear && !readOnly
 
   return (
     <Box
@@ -97,7 +101,6 @@ export function Input({
         </Center>
       )}
       <DevupInput
-        ref={ref}
         _disabled={{
           _placeholder: {
             color: 'var(--inputDisabledText, light-dark(#D6D7DE, #373737))',
@@ -189,6 +192,7 @@ export function ClearButton(props: ComponentProps<'button'>) {
       styleOrder={1}
       top="50%"
       transform="translateY(-50%)"
+      type="button"
       {...props}
     >
       <svg