diff --git a/.changeset/breezy-bees-help.md b/.changeset/breezy-bees-help.md
new file mode 100644
index 00000000..aa69450c
--- /dev/null
+++ b/.changeset/breezy-bees-help.md
@@ -0,0 +1,5 @@
+---
+'@devup-ui/components': patch
+---
+
+Fix input to controlled
diff --git a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
index 40c27c14..59f8f545 100644
--- a/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -7,7 +7,21 @@ exports[`Controlled Input > should render with value 1`] = `
>
+
+
+`;
+
+exports[`Input > shoue have class name when className prop is provided 1`] = `
+
@@ -35,7 +49,7 @@ exports[`Input > should not have padding right when allowClear is false 1`] = `
>
@@ -49,7 +63,7 @@ exports[`Input > should not show clear button when value is empty 1`] = `
>
@@ -63,7 +77,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
>
should pass className prop to icon component 1`] = `
@@ -167,7 +181,7 @@ exports[`Input > should render disabled icon style when disabled is true 1`] = `
@@ -182,7 +196,7 @@ exports[`Input > should render error style when error is true 1`] = `
>
@@ -196,7 +210,7 @@ exports[`Input > should render with allowClear prop 1`] = `
>
@@ -210,7 +224,7 @@ exports[`Input > should render with default props 1`] = `
>
@@ -224,7 +238,7 @@ exports[`Input > should render with disabled prop 1`] = `
>
@@ -239,7 +253,7 @@ exports[`Input > should show clear button when value is not empty 1`] = `
>
diff --git a/packages/components/src/components/Input/__tests__/index.browser.test.tsx b/packages/components/src/components/Input/__tests__/index.browser.test.tsx
index f965069b..580e293d 100644
--- a/packages/components/src/components/Input/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Input/__tests__/index.browser.test.tsx
@@ -11,6 +11,22 @@ describe('Input', () => {
expect(container).toMatchSnapshot()
})
+ it('shoue have class name when className prop is provided', () => {
+ const { container } = render(
+ ,
+ )
+ expect(container).toMatchSnapshot()
+ expect(container.querySelector('[aria-label="input"]')).toHaveClass('test')
+ })
+
it('should render with disabled prop', () => {
const { container } = render()
expect(container).toMatchSnapshot()
diff --git a/packages/components/src/components/Input/index.tsx b/packages/components/src/components/Input/index.tsx
index 5d12ceee..dcf089dd 100644
--- a/packages/components/src/components/Input/index.tsx
+++ b/packages/components/src/components/Input/index.tsx
@@ -38,7 +38,7 @@ interface InputProps extends Omit, '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) => {
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 (
{clearButtonVisible && }
diff --git a/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
index 40b81d24..d6aca1e2 100644
--- a/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -41,11 +41,12 @@ exports[`Stepper > should render 1`] = `
>
+ 0