From 8e110d5a5fa163bb727f2b27a4bcbcfc29e1506b Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Thu, 23 Nov 2023 20:59:37 +0100
Subject: [PATCH] core-components: invoke onChange only on focus

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../src/layout/HeaderTabs/HeaderTabs.test.tsx        | 12 ++++++++++++
 .../src/layout/HeaderTabs/HeaderTabs.tsx             |  7 +++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

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('<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);
+  });
 });
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],
   );