fix(useOverflowContainer): Removes double overflowManager creation (#…

…32459)
microsoft · Sep 5, 2024 · 47f0893 · 47f0893
1 parent 3c58526
commit 47f0893
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/change/@fluentui-react-overflow-f9979cd2-b20b-4857-97e8-4e9436f5353d.json b/change/@fluentui-react-overflow-f9979cd2-b20b-4857-97e8-4e9436f5353d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(useOverflowContainer): Removes double overflowManager creation",
+  "packageName": "@fluentui/react-overflow",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-overflow/library/src/useOverflowContainer.ts b/packages/react-components/react-overflow/library/src/useOverflowContainer.ts
@@ -28,6 +28,8 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
   update: OnUpdateOverflow,
   options: Omit<ObserveOptions, 'onUpdateOverflow'>,
 ): UseOverflowContainerReturn<TElement> => {
+  'use no memo';
+
   const {
     overflowAxis = 'horizontal',
     overflowDirection = 'end',
@@ -74,7 +76,9 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
     const newOverflowManager = createOverflowManager();
     newOverflowManager.observe(containerRef.current, overflowOptions);
     setOverflowManager(newOverflowManager);
-  }, [overflowOptions, firstMount]);
+    // We don't want to re-create the overflow manager when the first mount flag changes from true to false
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overflowOptions]);
 
   /* Clean up overflow manager on unmount */
   React.useEffect(