From b79c7bce190410338c28e3711e7b82a2e8cc0fb1 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 16 Oct 2025 13:48:03 +0900 Subject: [PATCH 1/5] Fix input --- .changeset/breezy-bees-help.md | 5 +++++ .../src/components/Input/Controlled.tsx | 8 +++++++- .../components/src/components/Input/index.tsx | 18 +++++++++++------- 3 files changed, 23 insertions(+), 8 deletions(-) create mode 100644 .changeset/breezy-bees-help.md 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/Controlled.tsx b/packages/components/src/components/Input/Controlled.tsx index bbeae7ad..5c086837 100644 --- a/packages/components/src/components/Input/Controlled.tsx +++ b/packages/components/src/components/Input/Controlled.tsx @@ -5,5 +5,11 @@ import { Input } from '.' export function Controlled() { const [value, setValue] = useState('') - return setValue(e.target.value)} value={value} /> + return ( + setValue(e.target.value)} + onClear={() => setValue('')} + value={value} + /> + ) } 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 && } From 0d78c23b17562b826fb442bfb4ccf7ea3fe7beb4 Mon Sep 17 00:00:00 2001 From: belltalion Date: Thu, 16 Oct 2025 14:12:18 +0900 Subject: [PATCH 2/5] update snap --- .../__snapshots__/index.browser.test.tsx.snap | 24 +++++++++---------- .../__snapshots__/index.browser.test.tsx.snap | 3 ++- .../__snapshots__/recommended.test.ts.snap | 5 ---- 3 files changed, 14 insertions(+), 18 deletions(-) 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..54eb7274 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,7 @@ exports[`Controlled Input > should render with value 1`] = ` > @@ -21,7 +21,7 @@ exports[`Input > should have typography when typography is provided 1`] = ` > @@ -35,7 +35,7 @@ exports[`Input > should not have padding right when allowClear is false 1`] = ` > @@ -49,7 +49,7 @@ exports[`Input > should not show clear button when value is empty 1`] = ` > @@ -63,7 +63,7 @@ exports[`Input > should pass className prop to error message component 1`] = ` > should pass className prop to icon component 1`] = ` @@ -167,7 +167,7 @@ exports[`Input > should render disabled icon style when disabled is true 1`] = ` @@ -182,7 +182,7 @@ exports[`Input > should render error style when error is true 1`] = ` > @@ -196,7 +196,7 @@ exports[`Input > should render with allowClear prop 1`] = ` > @@ -210,7 +210,7 @@ exports[`Input > should render with default props 1`] = ` > @@ -224,7 +224,7 @@ exports[`Input > should render with disabled prop 1`] = ` > @@ -239,7 +239,7 @@ exports[`Input > should show clear button when value is not empty 1`] = ` > 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