From 83d372c1688401b3de67d1b50f6612ae9cd76878 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Fri, 15 Nov 2024 20:27:32 +0800
Subject: [PATCH] Force CompositeRoot to propagate events

---
 .../mui-base/src/Composite/Root/CompositeRoot.tsx     |  3 +++
 .../mui-base/src/Composite/Root/useCompositeRoot.ts   |  7 ++++++-
 packages/mui-base/src/Tabs/Root/useTabsRoot.ts        | 11 +++++++----
 packages/mui-base/src/Tabs/Tab/useTab.ts              |  2 +-
 packages/mui-base/src/Tabs/TabsList/TabsList.tsx      |  1 +
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/mui-base/src/Composite/Root/CompositeRoot.tsx b/packages/mui-base/src/Composite/Root/CompositeRoot.tsx
index af8e23e1ea..2c7f396e67 100644
--- 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
index ca5a49748f..248cfa0de4 100644
--- 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
index 62b757154b..950417ee23 100644
--- 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
index f4699009cf..cc6df77bf4 100644
--- 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
index 993654b963..9a5528ea71 100644
--- 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}