diff --git a/.changeset/tired-mice-cheer.md b/.changeset/tired-mice-cheer.md new file mode 100644 index 0000000000..929aae0f59 --- /dev/null +++ b/.changeset/tired-mice-cheer.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Avoid overriding onChange when spreading props diff --git a/packages/ui/src/components/SearchField/SearchField.stories.tsx b/packages/ui/src/components/SearchField/SearchField.stories.tsx index a811d2a451..7cb89dfbfb 100644 --- a/packages/ui/src/components/SearchField/SearchField.stories.tsx +++ b/packages/ui/src/components/SearchField/SearchField.stories.tsx @@ -51,6 +51,7 @@ export const Default: Story = { style: { maxWidth: '300px', }, + 'aria-label': 'Search', }, }; @@ -192,7 +193,7 @@ export const InHeader: Story = { size="small" variant="secondary" /> - + } @@ -272,3 +273,24 @@ export const StartCollapsedWithButtons: Story = { ), }; + +export const StartCollapsedWithOnChange: Story = { + args: { + ...StartCollapsed.args, + }, + render: args => { + const handleChange = (value: string) => { + console.log('Search value:', value); + }; + + return ( + + + + ); + }, +}; diff --git a/packages/ui/src/components/SearchField/SearchField.tsx b/packages/ui/src/components/SearchField/SearchField.tsx index e497cecd49..1c4bb7fa18 100644 --- a/packages/ui/src/components/SearchField/SearchField.tsx +++ b/packages/ui/src/components/SearchField/SearchField.tsx @@ -39,6 +39,7 @@ export const SearchField = forwardRef( secondaryLabel, description, isRequired, + onChange, placeholder = 'Search', startCollapsed = false, 'aria-label': ariaLabel,