WIP Fix tab activation direction

mui · Nov 19, 2024 · 55e7dd5 · 55e7dd5
1 parent bc1840f
commit 55e7dd5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/packages/mui-base/src/Tabs/Root/useTabsRoot.ts b/packages/mui-base/src/Tabs/Root/useTabsRoot.ts
@@ -114,11 +114,24 @@ function useTabsRoot(parameters: useTabsRoot.Parameters): useTabsRoot.ReturnValu
   // put this into TabsRootContext
   // use it in useTabsList
   const getTabElementBySelectedValue = React.useCallback(
-    (/* selectedValue: any | undefined */) => {
+    (selectedValue: any | undefined): HTMLElement | null => {
       // console.log('getTabElementBySelectedValue', selectedValue);
+
+      if (selectedValue === undefined) {
+        return null;
+      }
+
+      for (const [tabElement, tabMetadata] of tabMap.entries()) {
+        if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {
+          // console.log(tabMetadata)
+          // console.log(tabElement);
+          return tabElement as HTMLElement;
+        }
+      }
+
       return null;
     },
-    [],
+    [tabMap],
   );
 
   // TODO: no need to put this in a ref anymore?

diff --git a/packages/mui-base/src/Tabs/TabsList/useTabsList.ts b/packages/mui-base/src/Tabs/TabsList/useTabsList.ts
@@ -49,15 +49,16 @@ function useTabsList(parameters: useTabsList.Parameters): useTabsList.ReturnValu
 
   const handleRef = useForkRef(tabsListRef, externalRef);
 
-  const getRootProps = (
-    externalProps: React.ComponentPropsWithoutRef<'div'> = {},
-  ): React.ComponentPropsWithRef<'div'> => {
-    return mergeReactProps(externalProps, {
-      'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
-      ref: handleRef,
-      role: 'tablist',
-    });
-  };
+  const getRootProps = React.useCallback(
+    (otherProps = {}): React.ComponentPropsWithRef<'div'> => {
+      return mergeReactProps(otherProps, {
+        'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
+        ref: handleRef,
+        role: 'tablist',
+      });
+    },
+    [handleRef, orientation],
+  );
 
   return {
     getRootProps,