diff --git a/.changeset/short-buttons-cover.md b/.changeset/short-buttons-cover.md
new file mode 100644
index 0000000000..2d98e212f7
--- /dev/null
+++ b/.changeset/short-buttons-cover.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed an issue where the `onChange` prop within `HeaderTabs` was triggering twice upon tab-switching.
diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx
index f656696f8a..5aec83bc2b 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx
+++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx
@@ -83,4 +83,16 @@ describe('', () => {
expect(rendered.getByText('Alarms')).toBeInTheDocument();
expect(rendered.getByText('three new alarms')).toBeInTheDocument();
});
+
+ it('should trigger onChange only once', async () => {
+ const mockOnChange = jest.fn();
+ const user = userEvent.setup();
+
+ const rendered = await renderInTestApp(
+ ,
+ );
+
+ await user.click(rendered.getByText('Docs'));
+ expect(mockOnChange).toHaveBeenCalledTimes(1);
+ });
});
diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
index 704df67374..799eab1eb5 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
@@ -99,7 +99,6 @@ export function HeaderTabs(props: HeaderTabsProps) {
return (
', () => {
);
expect(screen.getByText('Test Content 2')).toBeInTheDocument();
});
+
+ it('should trigger onChange only once', async () => {
+ const mockOnChange = jest.fn();
+ const user = userEvent.setup();
+
+ const rendered = render(
+ wrapInTestApp(
+
+
+ Test Content 1
+
+
+ Test Content 2
+
+ ,
+ ),
+ );
+
+ await user.click(rendered.getByText('Test 2'));
+ expect(mockOnChange).toHaveBeenCalledTimes(1);
+ });
});
diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
index 4e75878a7d..088e54c1f3 100644
--- a/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
+++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.tsx
@@ -114,7 +114,6 @@ export function TabbedCard(props: PropsWithChildren) {
{title && }