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,