fix: Non-dismissible tabs lose focus (#3539)

Author: georgylobko

src/tabs/__tests__/tabs.test.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useState } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import { KeyCode } from '@cloudscape-design/test-utils-core/utils';
@@ -940,6 +940,35 @@ describe('Tabs', () => {
     });
   });
 
+  describe('Dismissible mixed with non-dismissible', () => {
+    test('moves focus from the last dismissible button to non-dismissible', () => {
+      const TabsWrapper = () => {
+        const [tabsDismissibles, setTabDismissibles] = useState([
+          {
+            label: 'First tab',
+            id: 'first',
+            content: <>first</>,
+          },
+          {
+            label: 'Second tab',
+            id: 'second',
+            dismissible: true,
+            dismissLabel: 'Dismiss second tab (dismissibles variant)',
+            onDismiss: () => setTabDismissibles(prevTabs => prevTabs.slice(0, 1)),
+            content: <>second</>,
+          },
+        ]);
+
+        return <Tabs tabs={tabsDismissibles} />;
+      };
+      const { wrapper } = renderTabs(<TabsWrapper />);
+
+      wrapper.findDismissibleButtonByTabId('second')!.click();
+
+      expect(wrapper.findTabLinkById('first')!.getElement()).toHaveFocus();
+    });
+  });
+
   describe('Actions', () => {
     test('renders action', () => {
       const actionButton = renderTabs(<Tabs tabs={actionDismissibleTabs} />).wrapper.findActionByTabIndex(2);

src/tabs/tab-header-bar.tsx

@@ -19,6 +19,7 @@ import {
 } from '../internal/context/single-tab-stop-navigation-context';
 import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
 import useHiddenDescription from '../internal/hooks/use-hidden-description';
+import { usePrevious } from '../internal/hooks/use-previous';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
 import { circleIndex } from '../internal/utils/circle-index';
@@ -112,6 +113,7 @@ export function TabHeaderBar({
   const [focusedTabId, setFocusedTabId] = useState(activeTabId);
   const [previousActiveTabId, setPreviousActiveTabId] = useState<string | undefined>(activeTabId);
   const hasActionOrDismissible = tabs.some(tab => tab.action || tab.dismissible);
+  const hadActionOrDismissible = usePrevious(hasActionOrDismissible);
   const tabActionAttributes = hasActionOrDismissible
     ? {
         role: 'application',
@@ -124,6 +126,16 @@ export function TabHeaderBar({
         role: 'tablist',
       };
 
+  useEffect(() => {
+    if (hadActionOrDismissible && !hasActionOrDismissible) {
+      // when tabs becomes non-dismissible (e.g. when all dismissible tabs are removed),
+      // the hasActionOrDismissible is changing which causing tabs to re-mount to the React tree,
+      // which, in turn, causes losing their refs, and the nextActive.focus() function inside handleDismiss does not focus on the next tab
+      // so this code does
+      getNextFocusTarget()?.focus();
+    }
+  }, [hasActionOrDismissible, hadActionOrDismissible]);
+
   useEffect(() => {
     if (headerBarRef.current) {
       setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));