focus button after closing the menu

mui · Sep 23, 2022 · 8a3cc07 · 8a3cc07
1 parent 2253f0b
commit 8a3cc07
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
@@ -198,6 +198,7 @@ MenuItem.propTypes = {
 export default function UseMenu() {
   const [anchorEl, setAnchorEl] = React.useState(null);
   const preventReopen = React.useRef(false);
+  const buttonRef = React.useRef(null);
 
   const handleOnClick = (event) => {
     if (preventReopen.current) {
@@ -211,6 +212,7 @@ export default function UseMenu() {
 
   const handleOnClose = () => {
     setAnchorEl(null);
+    buttonRef.current.focus();
   };
 
   const open = Boolean(anchorEl);
@@ -231,6 +233,7 @@ export default function UseMenu() {
         className="button"
         onClick={handleOnClick}
         onMouseDown={handleButtonMouseDown}
+        ref={buttonRef}
       >
         Commands
       </button>

diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
@@ -200,6 +200,7 @@ const MenuItem = React.forwardRef(function MenuItem(
 export default function UseMenu() {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const preventReopen = React.useRef(false);
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
 
   const handleOnClick = (event: React.MouseEvent<HTMLElement>) => {
     if (preventReopen.current) {
@@ -213,6 +214,7 @@ export default function UseMenu() {
 
   const handleOnClose = () => {
     setAnchorEl(null);
+    buttonRef.current!.focus();
   };
 
   const open = Boolean(anchorEl);
@@ -233,6 +235,7 @@ export default function UseMenu() {
         className="button"
         onClick={handleOnClick}
         onMouseDown={handleButtonMouseDown}
+        ref={buttonRef}
       >
         Commands
       </button>