core-components: invoke onChange only on focus

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx

@@ -83,4 +83,16 @@ describe('<HeaderTabs />', () => {
     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(
+      <HeaderTabs tabs={mockTabs} onChange={mockOnChange} />,
+    );
+
+    await user.click(rendered.getByText('Docs'));
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+  });
 });

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