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

From 175d86b63b7fb1726daa669b39896a15276bc32f Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Thu, 23 Nov 2023 21:02:32 +0100
Subject: [PATCH 2/3] HeaderTabs changeset

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .changeset/short-buttons-cover.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/short-buttons-cover.md

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.

From 69919a82abf6b6f058740e5483baba3fcddf9856 Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Wed, 6 Dec 2023 15:27:00 +0100
Subject: [PATCH 3/3] Remove  flag from

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/layout/HeaderTabs/HeaderTabs.tsx      |  8 ++-----
 .../src/layout/TabbedCard/TabbedCard.test.tsx | 22 +++++++++++++++++++
 .../src/layout/TabbedCard/TabbedCard.tsx      |  1 -
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
index 59a40001ee..799eab1eb5 100644
--- a/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
+++ b/packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx
@@ -81,14 +81,11 @@ export function HeaderTabs(props: HeaderTabsProps) {
   const styles = useStyles();
 
   const handleChange = useCallback(
-    (e: React.ChangeEvent<{}>, index: number) => {
+    (_: React.ChangeEvent<{}>, index: number) => {
       if (selectedIndex === undefined) {
         setSelectedTab(index);
       }
-
-      if (e.type === 'focus') {
-        onChange?.(index);
-      }
+      if (onChange) onChange(index);
     },
     [selectedIndex, onChange],
   );
@@ -102,7 +99,6 @@ export function HeaderTabs(props: HeaderTabsProps) {
   return (
     <Box className={styles.tabsWrapper}>
       <Tabs
-        selectionFollowsFocus
         indicatorColor="primary"
         textColor="inherit"
         variant="scrollable"
diff --git a/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx b/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx
index 1b7c3329a2..707d528867 100644
--- a/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx
+++ b/packages/core-components/src/layout/TabbedCard/TabbedCard.test.tsx
@@ -18,6 +18,7 @@ import { renderInTestApp, wrapInTestApp } from '@backstage/test-utils';
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { CardTab, TabbedCard } from './TabbedCard';
+import userEvent from '@testing-library/user-event';
 
 const minProps = {
   title: 'Some title',
@@ -96,4 +97,25 @@ describe('<TabbedCard />', () => {
     );
     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(
+        <TabbedCard onChange={mockOnChange}>
+          <CardTab value="one" label="Test 1">
+            Test Content 1
+          </CardTab>
+          <CardTab value="two" label="Test 2">
+            Test Content 2
+          </CardTab>
+        </TabbedCard>,
+      ),
+    );
+
+    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<Props>) {
       <ErrorBoundary {...errProps}>
         {title && <BoldHeader title={title} />}
         <Tabs
-          selectionFollowsFocus
           classes={tabsClasses}
           value={value || selectedIndex}
           onChange={handleChange}