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 && }