Force CompositeRoot to propagate events

mui · Nov 19, 2024 · 83d372c · 83d372c
1 parent 68b5598
commit 83d372c
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/packages/mui-base/src/Composite/Root/CompositeRoot.tsx b/packages/mui-base/src/Composite/Root/CompositeRoot.tsx
@@ -27,6 +27,7 @@ const CompositeRoot = React.forwardRef(function CompositeRoot(
     cols,
     enableHomeAndEndKeys,
     onMapChange,
+    alwaysPropagateEvents,
     ...otherProps
   } = props;
 
@@ -39,6 +40,7 @@ const CompositeRoot = React.forwardRef(function CompositeRoot(
     activeIndex: activeIndexProp,
     onActiveIndexChange: onActiveIndexChangeProp,
     rootRef: forwardedRef,
+    alwaysPropagateEvents,
     enableHomeAndEndKeys,
   });
 
@@ -79,6 +81,7 @@ namespace CompositeRoot {
     enableHomeAndEndKeys?: boolean;
     // TODO: can't pass a generic <CustomMetadata> into forwardRef?
     onMapChange?: (newMap: Map<Node, any>) => void;
+    alwaysPropagateEvents?: boolean;
   }
 }
 

diff --git a/packages/mui-base/src/Composite/Root/useCompositeRoot.ts b/packages/mui-base/src/Composite/Root/useCompositeRoot.ts
@@ -45,6 +45,7 @@ export interface UseCompositeRootParameters {
    * @default false
    */
   enableHomeAndEndKeys?: boolean;
+  alwaysPropagateEvents?: boolean;
 }
 
 // Advanced options of Composite, to be implemented later if needed.
@@ -64,6 +65,7 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
     onActiveIndexChange: externalSetActiveIndex,
     rootRef: externalRef,
     enableHomeAndEndKeys = false,
+    alwaysPropagateEvents = false,
   } = params;
 
   const [internalActiveIndex, internalSetActiveIndex] = React.useState(0);
@@ -219,7 +221,9 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
           }
 
           if (nextIndex !== activeIndex && !isIndexOutOfBounds(elementsRef, nextIndex)) {
-            event.stopPropagation();
+            if (!alwaysPropagateEvents) {
+              event.stopPropagation();
+            }
 
             if (preventedKeys.includes(event.key)) {
               event.preventDefault();
@@ -236,6 +240,7 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
       }),
     [
       activeIndex,
+      alwaysPropagateEvents,
       cols,
       dense,
       elementsRef,

diff --git a/packages/mui-base/src/Tabs/Root/useTabsRoot.ts b/packages/mui-base/src/Tabs/Root/useTabsRoot.ts
@@ -113,10 +113,13 @@ function useTabsRoot(parameters: useTabsRoot.Parameters): useTabsRoot.ReturnValu
   // used as a param for `useActivationDirectionDetector`
   // put this into TabsRootContext
   // use it in useTabsList
-  const getTabElementBySelectedValue = React.useCallback((selectedValue: any | undefined) => {
-    console.log('getTabElementBySelectedValue', selectedValue);
-    return null;
-  }, []);
+  const getTabElementBySelectedValue = React.useCallback(
+    (/* selectedValue: any | undefined */) => {
+      // console.log('getTabElementBySelectedValue', selectedValue);
+      return null;
+    },
+    [],
+  );
 
   // TODO: no need to put this in a ref anymore?
   const registerGetTabIdByPanelValueOrIndexFn = React.useCallback(

diff --git a/packages/mui-base/src/Tabs/Tab/useTab.ts b/packages/mui-base/src/Tabs/Tab/useTab.ts
@@ -59,7 +59,7 @@ function useTab(parameters: useTab.Parameters): useTab.ReturnValue {
   // FIXME: something is wrong with this
   useEnhancedEffect(() => {
     if (activateOnFocus && selected && index > -1 && highlightedTabIndex !== index) {
-      console.log('useEnhancedEffect update index', index);
+      // console.log('useEnhancedEffect update index', index);
       setHighlightedTabIndex(index);
     }
   }, [activateOnFocus, highlightedTabIndex, index, selected, setHighlightedTabIndex]);

diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.tsx
@@ -96,6 +96,7 @@ const TabsList = React.forwardRef(function TabsList(
        */}
       <CompositeRoot
         activeIndex={highlightedTabIndex}
+        alwaysPropagateEvents
         loop={loop}
         onActiveIndexChange={setHighlightedTabIndex}
         onMapChange={setTabMap}