Merge pull request #21515 from backstage/vinzscam/fix-header-tabs-onchange

Fix HeaderTabs onChange

.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.

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

@@ -99,7 +99,6 @@ export function HeaderTabs(props: HeaderTabsProps) {
   return (
     <Box className={styles.tabsWrapper}>
       <Tabs
-        selectionFollowsFocus
         indicatorColor="primary"
         textColor="inherit"
         variant="scrollable"

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);
+  });
 });

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}