From a52bd7ca5df4f9ff26c99b492f617d366ab8e920 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 20 May 2023 17:08:20 +0800
Subject: [PATCH] Attempt to fix lost focus when closing nav menu

---
 src/components/nav-menu.jsx | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
index 402331d9..7d6fbb8a 100644
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@@ -1,11 +1,5 @@
-import {
-  ControlledMenu,
-  MenuDivider,
-  MenuItem,
-  useClick,
-  useMenuState,
-} from '@szhsin/react-menu';
-import { useRef } from 'preact/hooks';
+import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
+import { useRef, useState } from 'preact/hooks';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
 
@@ -47,8 +41,7 @@ function NavMenu(props) {
   );
 
   const buttonRef = useRef();
-  const [menuState, toggleMenu] = useMenuState();
-  const anchorProps = useClick(menuState.state, toggleMenu);
+  const [menuState, setMenuState] = useState(undefined);
 
   return (
     <>
@@ -59,7 +52,9 @@ function NavMenu(props) {
           moreThanOneAccount ? 'with-avatar' : ''
         } ${open ? 'active' : ''}`}
         style={{ position: 'relative' }}
-        {...anchorProps}
+        onClick={() => {
+          setMenuState((state) => (!state ? 'open' : undefined));
+        }}
         onContextMenu={(e) => {
           e.preventDefault();
           states.showAccounts = true;
@@ -78,17 +73,17 @@ function NavMenu(props) {
         <Icon icon="menu" size={moreThanOneAccount ? 's' : 'l'} />
       </button>
       <ControlledMenu
-        {...menuState}
+        state={menuState}
         anchorRef={buttonRef}
         onClose={() => {
-          toggleMenu(false);
+          setMenuState(undefined);
         }}
         containerProps={{
           style: {
             zIndex: 10,
           },
           onClick: () => {
-            toggleMenu(false);
+            setMenuState(undefined);
           },
         }}
         portal={{