[Tabs] Fix being able to activate a disabled tab (#1359)

mui · Jan 28, 2025 · 851d1c1 · 851d1c1
1 parent 9a3bc73
commit 851d1c1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git a/packages/react/src/tabs/root/TabsRoot.test.tsx b/packages/react/src/tabs/root/TabsRoot.test.tsx
@@ -301,6 +301,58 @@ describe('<Tabs.Root />', () => {
     });
   });
 
+  describe('pointer navigation', () => {
+    it('activates the clicked tab', async () => {
+      const { user } = await render(
+        <Tabs.Root defaultValue={0}>
+          <Tabs.List activateOnFocus={false}>
+            <Tabs.Tab value={0}>Tab 1</Tabs.Tab>
+            <Tabs.Tab value={1}>Tab 2</Tabs.Tab>
+            <Tabs.Tab value={2}>Tab 3</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel>Panel 1</Tabs.Panel>
+          <Tabs.Panel>Panel 2</Tabs.Panel>
+          <Tabs.Panel>Panel 3</Tabs.Panel>
+        </Tabs.Root>,
+      );
+
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2);
+
+      const panels = screen.getAllByRole('tabpanel', { hidden: true });
+
+      expect(panels[0]).to.have.attribute('hidden');
+      expect(panels[1]).not.to.have.attribute('hidden');
+      expect(panels[2]).to.have.attribute('hidden');
+    });
+
+    it('does not activate the clicked disabled tab', async () => {
+      const { user } = await render(
+        <Tabs.Root defaultValue={0}>
+          <Tabs.List activateOnFocus={false}>
+            <Tabs.Tab value={0}>Tab 1</Tabs.Tab>
+            <Tabs.Tab disabled value={1}>
+              Tab 2
+            </Tabs.Tab>
+            <Tabs.Tab value={2}>Tab 3</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel>Panel 1</Tabs.Panel>
+          <Tabs.Panel>Panel 2</Tabs.Panel>
+          <Tabs.Panel>Panel 3</Tabs.Panel>
+        </Tabs.Root>,
+      );
+
+      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2);
+
+      const panels = screen.getAllByRole('tabpanel', { hidden: true });
+
+      expect(panels[0]).not.to.have.attribute('hidden');
+      expect(panels[1]).to.have.attribute('hidden');
+      expect(panels[2]).to.have.attribute('hidden');
+    });
+  });
+
   describe('keyboard navigation when focus is on a tab', () => {
     [
       ['horizontal', 'ltr', 'ArrowLeft', 'ArrowRight'],

diff --git a/packages/react/src/tabs/tab/useTabsTab.ts b/packages/react/src/tabs/tab/useTabsTab.ts
@@ -90,14 +90,14 @@ function useTabsTab(parameters: useTabsTab.Parameters): useTabsTab.ReturnValue {
           id,
           ref: handleRef,
           onClick(event) {
-            if (selected) {
+            if (selected || disabled) {
               return;
             }
 
             onTabActivation(tabValue, event.nativeEvent);
           },
           onFocus(event) {
-            if (!activateOnFocus || selected) {
+            if (!activateOnFocus || selected || disabled) {
               return;
             }
 
@@ -106,7 +106,7 @@ function useTabsTab(parameters: useTabsTab.Parameters): useTabsTab.ReturnValue {
             }
           },
           onPointerDown(event) {
-            if (selected) {
+            if (selected || disabled) {
               return;
             }
 
@@ -138,6 +138,7 @@ function useTabsTab(parameters: useTabsTab.Parameters): useTabsTab.ReturnValue {
       selected,
       tabPanelId,
       tabValue,
+      disabled,
     ],
   );