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] 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}