[docs] Fix the reopening menu problem in MenuUnstyled demo

mui · Aug 11, 2022 · 190ab21 · 190ab21
1 parent fc1212d
commit 190ab21
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 0 deletions.
diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js
@@ -108,15 +108,30 @@ export default function UnstyledMenuSimple() {
   const isOpen = Boolean(anchorEl);
   const buttonRef = React.useRef(null);
   const menuActions = React.useRef(null);
+  const preventReopen = React.useRef(false);
 
   const handleButtonClick = (event) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
     if (isOpen) {
       setAnchorEl(null);
     } else {
       setAnchorEl(event.currentTarget);
     }
   };
 
+  const handleButtonMouseDown = () => {
+    if (isOpen) {
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
+    }
+  };
+
   const handleButtonKeyDown = (event) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
@@ -145,6 +160,7 @@ export default function UnstyledMenuSimple() {
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
+        onMouseDown={handleButtonMouseDown}
         ref={buttonRef}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}

diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx
@@ -108,15 +108,30 @@ export default function UnstyledMenuSimple() {
   const isOpen = Boolean(anchorEl);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
+  const preventReopen = React.useRef(false);
 
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
     if (isOpen) {
       setAnchorEl(null);
     } else {
       setAnchorEl(event.currentTarget);
     }
   };
 
+  const handleButtonMouseDown = () => {
+    if (isOpen) {
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
+    }
+  };
+
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
@@ -145,6 +160,7 @@ export default function UnstyledMenuSimple() {
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
+        onMouseDown={handleButtonMouseDown}
         ref={buttonRef}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}

diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -146,15 +146,30 @@ export default function WrappedMenuItems() {
   const isOpen = Boolean(anchorEl);
   const buttonRef = React.useRef(null);
   const menuActions = React.useRef(null);
+  const preventReopen = React.useRef(false);
 
   const handleButtonClick = (event) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
     if (isOpen) {
       setAnchorEl(null);
     } else {
       setAnchorEl(event.currentTarget);
     }
   };
 
+  const handleButtonMouseDown = () => {
+    if (isOpen) {
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
+    }
+  };
+
   const handleButtonKeyDown = (event) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
@@ -183,6 +198,7 @@ export default function WrappedMenuItems() {
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
+        onMouseDown={handleButtonMouseDown}
         ref={buttonRef}
         aria-controls={isOpen ? 'wrapped-menu' : undefined}
         aria-expanded={isOpen || undefined}

diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -145,15 +145,30 @@ export default function WrappedMenuItems() {
   const isOpen = Boolean(anchorEl);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
+  const preventReopen = React.useRef(false);
 
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
     if (isOpen) {
       setAnchorEl(null);
     } else {
       setAnchorEl(event.currentTarget);
     }
   };
 
+  const handleButtonMouseDown = () => {
+    if (isOpen) {
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
+    }
+  };
+
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
@@ -182,6 +197,7 @@ export default function WrappedMenuItems() {
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
+        onMouseDown={handleButtonMouseDown}
         ref={buttonRef}
         aria-controls={isOpen ? 'wrapped-menu' : undefined}
         aria-expanded={isOpen || undefined}