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`] = ` +
+
+
@@ -21,7 +35,7 @@ exports[`Input > should have typography when typography 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