From 4adbb03a272089649fbfbda3d834644fb0b9e971 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Tue, 23 Sep 2025 14:26:18 +0200
Subject: [PATCH] fix(bui): Fix SearchField onChange prop and add onChange
 story
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
---
 .changeset/tired-mice-cheer.md                |  5 ++++
 .../SearchField/SearchField.stories.tsx       | 24 ++++++++++++++++++-
 .../components/SearchField/SearchField.tsx    |  1 +
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tired-mice-cheer.md

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"
             />
-            <SearchField {...args} size="small" />
+            <SearchField aria-label="Search" {...args} size="small" />
             <ButtonIcon
               aria-label="Cactus icon button"
               icon={<RiCactusLine />}
@@ -272,3 +273,24 @@ export const StartCollapsedWithButtons: Story = {
     </Flex>
   ),
 };
+
+export const StartCollapsedWithOnChange: Story = {
+  args: {
+    ...StartCollapsed.args,
+  },
+  render: args => {
+    const handleChange = (value: string) => {
+      console.log('Search value:', value);
+    };
+
+    return (
+      <Flex
+        direction="row"
+        gap="2"
+        style={{ width: '100%', maxWidth: '600px' }}
+      >
+        <SearchField {...args} onChange={handleChange} size="small" />
+      </Flex>
+    );
+  },
+};
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<HTMLDivElement, SearchFieldProps>(
       secondaryLabel,
       description,
       isRequired,
+      onChange,
       placeholder = 'Search',
       startCollapsed = false,
       'aria-label': ariaLabel,