From d816fb086033715be66e9ed0daf4a642e4cb7ef3 Mon Sep 17 00:00:00 2001
From: Andrej <44305048+aacevski@users.noreply.github.com>
Date: Tue, 9 Jan 2024 10:24:01 +0100
Subject: [PATCH] [docs][material-ui][Drawer] Resolve flickering when
 double-clicking on the backdrop to close it (#40343)

Signed-off-by: Marija Najdova <mnajdova@gmail.com>
Co-authored-by: Marija Najdova <mnajdova@gmail.com>
---
 .../components/drawers/ResponsiveDrawer.js      | 17 +++++++++++++++--
 .../components/drawers/ResponsiveDrawer.tsx     | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js
index 1f02058cad5453..89a66c9e5e4163 100644
--- 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
index e6363a1136e21b..a06f4aa609ffee 100644
--- 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.
           }}