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..59a40001ee 100644 --- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx +++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx @@ -81,11 +81,14 @@ export function HeaderTabs(props: HeaderTabsProps) { const styles = useStyles(); const handleChange = useCallback( - (_: React.ChangeEvent<{}>, index: number) => { + (e: React.ChangeEvent<{}>, index: number) => { if (selectedIndex === undefined) { setSelectedTab(index); } - if (onChange) onChange(index); + + if (e.type === 'focus') { + onChange?.(index); + } }, [selectedIndex, onChange], );