Fix TabsTab

mui · Feb 17, 2025 · 7dbdef8 · 7dbdef8
1 parent 42a342e
commit 7dbdef8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/react/src/tabs/root/TabsRoot.test.tsx b/packages/react/src/tabs/root/TabsRoot.test.tsx
@@ -692,7 +692,7 @@ describe('<Tabs.Root />', () => {
                   </Tabs.Root>
                 </DirectionProvider>,
               );
-              const [firstTab, disabledTab] = getAllByRole('tab');
+              const [firstTab, disabledTab, thirdTab] = getAllByRole('tab');
               await act(async () => {
                 firstTab.focus();
               });
@@ -704,6 +704,10 @@ describe('<Tabs.Root />', () => {
               expect(handleChange.callCount).to.equal(0);
               expect(handleKeyDown.callCount).to.equal(1);
               expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true);
+
+              fireEvent.keyDown(disabledTab, { key: nextItemKey });
+              await flushMicrotasks();
+              expect(thirdTab).toHaveFocus();
             });
           });
         },
@@ -853,7 +857,7 @@ describe('<Tabs.Root />', () => {
             const handleChange = spy();
             const handleKeyDown = spy();
             const { getAllByRole } = await render(
-              <Tabs.Root onKeyDown={handleKeyDown} onValueChange={handleChange} value={2}>
+              <Tabs.Root onKeyDown={handleKeyDown} onValueChange={handleChange} value={0}>
                 <Tabs.List activateOnFocus={activateOnFocusProp}>
                   <Tabs.Tab value={0} />
                   <Tabs.Tab value={1} />

diff --git a/packages/react/src/tabs/tab/useTabsTab.ts b/packages/react/src/tabs/tab/useTabsTab.ts
@@ -58,14 +58,6 @@ function useTabsTab(parameters: useTabsTab.Parameters): useTabsTab.ReturnValue {
     return valueParam === selectedTabValue;
   }, [index, selectedTabValue, valueParam]);
 
-  // when activateOnFocus is `true`, ensure the active item in Composite's roving
-  // focus group matches the selected Tab
-  useEnhancedEffect(() => {
-    if (activateOnFocus && selected && index > -1 && highlightedTabIndex !== index) {
-      setHighlightedTabIndex(index);
-    }
-  }, [activateOnFocus, highlightedTabIndex, index, selected, setHighlightedTabIndex]);
-
   const { getButtonProps, buttonRef } = useButton({
     disabled,
     focusableWhenDisabled: true,
@@ -105,6 +97,11 @@ function useTabsTab(parameters: useTabsTab.Parameters): useTabsTab.ReturnValue {
               onTabActivation(tabValue, event.nativeEvent);
             }
           },
+          onKeyDown() {
+            if (index > -1) {
+              setHighlightedTabIndex(index);
+            }
+          },
           onPointerDown(event) {
             if (selected || disabled) {
               return;
@@ -139,6 +136,8 @@ function useTabsTab(parameters: useTabsTab.Parameters): useTabsTab.ReturnValue {
       tabPanelId,
       tabValue,
       disabled,
+      index,
+      setHighlightedTabIndex,
     ],
   );