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],
);