fix: remove forced synchronous layout in Drawer (#33665)

microsoft · Jan 22, 2025 · d9e5810 · d9e5810
1 parent 82ef8b9
commit d9e5810
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/change/@fluentui-react-drawer-592aa752-5056-4be4-bf91-b47f98cea7d4.json b/change/@fluentui-react-drawer-592aa752-5056-4be4-bf91-b47f98cea7d4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove forced synchronous layout in Drawer",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBody.ts b/packages/react-components/react-drawer/library/src/components/DrawerBody/useDrawerBody.ts
@@ -65,15 +65,18 @@ export const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HT
   }, [cancelAnimationFrame, setAnimationFrame, updateScrollState]);
 
   useIsomorphicLayoutEffect(() => {
-    updateScrollState();
+    cancelAnimationFrame();
+    setAnimationFrame(() => updateScrollState());
     /* update scroll state when children changes */
-  }, [props.children, updateScrollState]);
+    return () => cancelAnimationFrame();
+  }, [props.children, cancelAnimationFrame, updateScrollState, setAnimationFrame]);
 
   useIsomorphicLayoutEffect(() => {
-    updateScrollState();
+    cancelAnimationFrame();
+    setAnimationFrame(() => updateScrollState());
 
     return () => cancelAnimationFrame();
-  }, [cancelAnimationFrame, updateScrollState]);
+  }, [cancelAnimationFrame, updateScrollState, setAnimationFrame]);
 
   return {
     components: {