Fix open animations

mui · Jan 8, 2025 · 30d8bad · 30d8bad
1 parent 29225b8
commit 30d8bad
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/packages/react/src/dialog/root/useDialogRoot.ts b/packages/react/src/dialog/root/useDialogRoot.ts
@@ -64,7 +64,7 @@ export function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.R
     open,
     ref: popupRef,
     onComplete() {
-      onOpenChangeComplete?.(false);
+      onOpenChangeComplete?.(open);
 
       if (!open) {
         setMounted(false);

diff --git a/packages/react/src/utils/useAnimationsFinished.ts b/packages/react/src/utils/useAnimationsFinished.ts
@@ -7,7 +7,10 @@ import { useEventCallback } from './useEventCallback';
  * Executes a function once all animations have finished on the provided element.
  * @ignore - internal hook.
  */
-export function useAnimationsFinished(ref: React.RefObject<HTMLElement | null>) {
+export function useAnimationsFinished(
+  ref: React.RefObject<HTMLElement | null>,
+  extraFrame: boolean,
+) {
   const frameRef = React.useRef(-1);
 
   const cancelFrames = useEventCallback(() => {
@@ -29,11 +32,24 @@ export function useAnimationsFinished(ref: React.RefObject<HTMLElement | null>)
       fnToExecute();
     } else {
       frameRef.current = requestAnimationFrame(() => {
-        Promise.allSettled(element.getAnimations().map((anim) => anim.finished)).then(() => {
-          // Synchronously flush the unmounting of the component so that the browser doesn't
-          // paint: https://github.com/mui/base-ui/issues/979
-          ReactDOM.flushSync(fnToExecute);
-        });
+        function exec() {
+          if (!element) {
+            return;
+          }
+
+          Promise.allSettled(element.getAnimations().map((anim) => anim.finished)).then(() => {
+            // Synchronously flush the unmounting of the component so that the browser doesn't
+            // paint: https://github.com/mui/base-ui/issues/979
+            ReactDOM.flushSync(fnToExecute);
+          });
+        }
+
+        // `open` animations needs to wait 2 frames for the animations to be detected.
+        if (extraFrame) {
+          frameRef.current = requestAnimationFrame(exec);
+        } else {
+          exec();
+        }
       });
     }
   });

diff --git a/packages/react/src/utils/useOpenChangeComplete.tsx b/packages/react/src/utils/useOpenChangeComplete.tsx
@@ -9,7 +9,7 @@ export function useOpenChangeComplete(parameters: useOpenChangeComplete.Paramete
   const { open, ref, onComplete: onCompleteParam } = parameters;
 
   const onComplete = useEventCallback(onCompleteParam);
-  const runOnceAnimationsFinish = useAnimationsFinished(ref);
+  const runOnceAnimationsFinish = useAnimationsFinished(ref, open);
 
   useEnhancedEffect(() => {
     runOnceAnimationsFinish(onComplete);