fix(material): ensure exit transition runs by delaying modal unmount

.changeset/breezy-bees-worry.md

@@ -0,0 +1,5 @@
+---
+"@suid/material": patch
+---
+
+Ensure exit transition runs by delaying modal unmount.

packages/material/src/Dialog/Dialog.tsx

@@ -6,16 +6,15 @@ import Paper from "../Paper";
 import styled from "../styles/styled";
 import useTheme from "../styles/useTheme";
 import DialogContext from "./DialogContext";
-import { getDialogUtilityClass } from "./dialogClasses";
-import dialogClasses from "./dialogClasses";
+import dialogClasses, { getDialogUtilityClass } from "./dialogClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
 import { Breakpoint } from "@suid/system";
 import createRef from "@suid/system/createRef";
 import { EventParam, PropsOf } from "@suid/types";
 import { createUniqueId } from "@suid/utils";
 import capitalize from "@suid/utils/capitalize";
 import clsx from "clsx";
-import { splitProps, mergeProps } from "solid-js";
+import { createEffect, createSignal, mergeProps, splitProps } from "solid-js";
 
 type OwnerState = PropsOf<DialogTypeMap>;
 
@@ -281,6 +280,19 @@ const Dialog = $.defineComponent(function Dialog(inProps) {
     },
   };
 
+  const [rootOpen, setRootOpen] = createSignal(props.open);
+
+  const handleExited = () => {
+    if (props.TransitionProps?.onExited) {
+      props.TransitionProps?.onExited();
+    }
+    setRootOpen(false);
+  };
+
+  createEffect(() => {
+    if (props.open) setRootOpen(true);
+  });
+
   return (
     <DialogRoot
       class={clsx(classes.root, props.class)}
@@ -299,7 +311,7 @@ const Dialog = $.defineComponent(function Dialog(inProps) {
       BackdropComponent={DialogBackdrop}
       disableEscapeKeyDown={baseProps.disableEscapeKeyDown}
       onClose={props.onClose}
-      open={props.open}
+      open={rootOpen()}
       ref={ref}
       onClick={handleBackdropClick}
       ownerState={ownerState}
@@ -309,6 +321,7 @@ const Dialog = $.defineComponent(function Dialog(inProps) {
         appear
         in={props.open}
         timeout={baseProps.transitionDuration}
+        onExited={handleExited}
         // [pending]
         //role="presentation"
         {...props.TransitionProps}

packages/material/src/Menu/Menu.tsx

@@ -2,15 +2,14 @@ import { MenuTypeMap } from ".";
 import MenuList from "../MenuList";
 import Paper from "../Paper";
 import Popover from "../Popover";
-import { skipRootProps } from "../styles/styled";
-import styled from "../styles/styled";
+import styled, { skipRootProps } from "../styles/styled";
 import useTheme from "../styles/useTheme";
 import { getMenuUtilityClass } from "./menuClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
 import createRef from "@suid/system/createRef";
 import { inspectChildren, isComponentObject } from "@suid/system/inspect";
 import clsx from "clsx";
-import { splitProps, mergeProps } from "solid-js";
+import { mergeProps, splitProps } from "solid-js";
 
 const $ = createComponentFactory<MenuTypeMap>()({
   name: "MuiMenu",
@@ -107,7 +106,7 @@ const Menu = $.defineComponent(function Menu(inProps) {
 
   const [, TransitionProps] = splitProps(
     mergeProps(() => props.TransitionProps || {}),
-    ["onEntering"]
+    ["onEntering", "onExited"]
   );
 
   const theme = useTheme();
@@ -136,6 +135,12 @@ const Menu = $.defineComponent(function Menu(inProps) {
     }
   };
 
+  const handleExited = () => {
+    if (props.TransitionProps?.onExited) {
+      props.TransitionProps?.onExited();
+    }
+  };
+
   const handleListKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Tab") {
       event.preventDefault();
@@ -191,7 +196,7 @@ const Menu = $.defineComponent(function Menu(inProps) {
   );
 
   const transitionProps = mergeProps(
-    { onEntering: handleEntering },
+    { onEntering: handleEntering, onExited: handleExited },
     TransitionProps
   );
 

packages/material/src/Popover/Popover.tsx

@@ -11,7 +11,14 @@ import debounce from "@suid/utils/debounce";
 import ownerDocument from "@suid/utils/ownerDocument";
 import ownerWindow from "@suid/utils/ownerWindow";
 import clsx from "clsx";
-import { createEffect, on, splitProps, mergeProps, onCleanup } from "solid-js";
+import {
+  createEffect,
+  createSignal,
+  mergeProps,
+  on,
+  onCleanup,
+  splitProps,
+} from "solid-js";
 
 const $ = createComponentFactory<PopoverTypeMap>()({
   name: "MuiPopover",
@@ -156,7 +163,7 @@ const Popover = $.defineComponent(function Popover(inProps) {
 
   const [, TransitionProps] = splitProps(
     mergeProps(() => props.TransitionProps || {}),
-    ["onEntering"]
+    ["onEntering", "onExited"]
   );
   const paperRef = createRef(() => baseProps.PaperProps.ref);
   const ownerState = mergeProps(props, {
@@ -359,8 +366,18 @@ const Popover = $.defineComponent(function Popover(inProps) {
     setPositioningStyles();
   };
 
+  const [rootOpen, setRootOpen] = createSignal(props.open);
+
+  const handleExited = () => {
+    if (props.TransitionProps?.onExited) {
+      props.TransitionProps?.onExited();
+    }
+    setRootOpen(false);
+  };
+
   createEffect(() => {
     if (props.open) {
+      setRootOpen(true);
       setPositioningStyles();
     }
   });
@@ -440,14 +457,15 @@ const Popover = $.defineComponent(function Popover(inProps) {
       BackdropProps={{ invisible: true }}
       class={clsx(classes.root, props.class)}
       container={container()}
-      open={props.open}
+      open={rootOpen()}
       ownerState={ownerState}
       {...other}
     >
       <baseProps.TransitionComponent
         appear
         in={props.open}
         onEntering={handleEntering}
+        onExited={handleExited}
         timeout={transitionDuration()}
         {...TransitionProps}
       >