[docs][material-ui][Drawer] Resolve flickering when double-clicking o…

…n the backdrop to close it (mui#40343) Signed-off-by: Marija Najdova <[email protected]> Co-authored-by: Marija Najdova <[email protected]>
mnajdova · Jan 9, 2024 · d816fb0 · d816fb0
1 parent 191d684
commit d816fb0
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
@@ -22,9 +22,21 @@ const drawerWidth = 240;
 function ResponsiveDrawer(props) {
   const { window } = props;
   const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [isClosing, setIsClosing] = React.useState(false);
+
+  const handleDrawerClose = () => {
+    setIsClosing(true);
+    setMobileOpen(false);
+  };
+
+  const handleDrawerTransitionEnd = () => {
+    setIsClosing(false);
+  };
 
   const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
+    if (!isClosing) {
+      setMobileOpen(!mobileOpen);
+    }
   };
 
   const drawer = (
@@ -97,7 +109,8 @@ function ResponsiveDrawer(props) {
           container={container}
           variant="temporary"
           open={mobileOpen}
-          onClose={handleDrawerToggle}
+          onTransitionEnd={handleDrawerTransitionEnd}
+          onClose={handleDrawerClose}
           ModalProps={{
             keepMounted: true, // Better open performance on mobile.
           }}

diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/ResponsiveDrawer.tsx
@@ -29,9 +29,21 @@ interface Props {
 export default function ResponsiveDrawer(props: Props) {
   const { window } = props;
   const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [isClosing, setIsClosing] = React.useState(false);
+
+  const handleDrawerClose = () => {
+    setIsClosing(true);
+    setMobileOpen(false);
+  };
+
+  const handleDrawerTransitionEnd = () => {
+    setIsClosing(false);
+  };
 
   const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
+    if (!isClosing) {
+      setMobileOpen(!mobileOpen);
+    }
   };
 
   const drawer = (
@@ -104,7 +116,8 @@ export default function ResponsiveDrawer(props: Props) {
           container={container}
           variant="temporary"
           open={mobileOpen}
-          onClose={handleDrawerToggle}
+          onTransitionEnd={handleDrawerTransitionEnd}
+          onClose={handleDrawerClose}
           ModalProps={{
             keepMounted: true, // Better open performance on mobile.
           }}