fix: remove locking closeOnBlur

app/assets/javascripts/components/NotesContextMenu.tsx

@@ -2,7 +2,7 @@ import { AppState } from '@/ui_models/app_state';
 import { toDirective, useCloseOnBlur } from './utils';
 import { observer } from 'mobx-react-lite';
 import { NotesOptions } from './NotesOptions';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 
 type Props = {
   appState: AppState;
@@ -12,18 +12,12 @@ const NotesContextMenu = observer(({ appState }: Props) => {
   const contextMenuRef = useRef<HTMLDivElement>();
   const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(
     contextMenuRef,
-    (open: boolean) => null
+    (open: boolean) => appState.notes.setContextMenuOpen(open)
   );
-  const [submenuOpen, setSubmenuOpen] = useState(false);
 
   const closeOnClickOutside = (event: MouseEvent) => {
     if (!contextMenuRef.current?.contains(event.target as Node)) {
-      if (submenuOpen) {
+      appState.notes.setContextMenuOpen(false);
-        setSubmenuOpen(false);
-      } else {
-        console.log('here');
-        appState.notes.setContextMenuOpen(false);
-      }
     }
   };
 
@@ -43,9 +37,6 @@ const NotesContextMenu = observer(({ appState }: Props) => {
       <NotesOptions
         appState={appState}
         closeOnBlur={closeOnBlur}
-        setLockCloseOnBlur={setLockCloseOnBlur}
-        submenuOpen={submenuOpen}
-        setSubmenuOpen={setSubmenuOpen}
       />
     </div>
   ) : null;

app/assets/javascripts/components/NotesOptions.tsx

@@ -12,14 +12,13 @@ import {
 type Props = {
   appState: AppState;
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
-  setLockCloseOnBlur: (lock: boolean) => void;
   onSubmenuChange?: (submenuOpen: boolean) => void;
 };
 
 const MAX_TAGS_MENU_HEIGHT = 265;
 
 export const NotesOptions = observer(
-  ({ appState, closeOnBlur, setLockCloseOnBlur, onSubmenuChange }: Props) => {
+  ({ appState, closeOnBlur, onSubmenuChange }: Props) => {
     const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
     const [tagsMenuPosition, setTagsMenuPosition] = useState({
       top: 0,
@@ -33,7 +32,6 @@ export const NotesOptions = observer(
     const trashed = !notes.some((note) => !note.trashed);
     const pinned = !notes.some((note) => !note.pinned);
 
-    const trashButtonRef = useRef<HTMLButtonElement>();
     const tagsButtonRef = useRef<HTMLButtonElement>();
 
     const iconClass = 'fill-current color-neutral mr-2';
@@ -176,13 +174,10 @@ export const NotesOptions = observer(
           {archived ? 'Unarchive' : 'Archive'}
         </button>
         <button
-          ref={trashButtonRef}
           onBlur={closeOnBlur}
           className={`${buttonClass} py-1.5`}
           onClick={async () => {
-            setLockCloseOnBlur(true);
+            await appState.notes.setTrashSelectedNotes(!trashed);
-            await appState.notes.setTrashSelectedNotes(!trashed, trashButtonRef);
-            setLockCloseOnBlur(false);
           }}
         >
           <Icon type={trashed ? IconType.Restore : IconType.Trash} className={iconClass} />
@@ -193,9 +188,7 @@ export const NotesOptions = observer(
             onBlur={closeOnBlur}
             className={`${buttonClass} py-1.5`}
             onClick={async () => {
-              setLockCloseOnBlur(true);
               await appState.notes.deleteNotesPermanently();
-              setLockCloseOnBlur(false);
             }}
           >
             <Icon type={IconType.Close} className="fill-current color-danger mr-2" />

app/assets/javascripts/components/NotesOptionsPanel.tsx

@@ -76,7 +76,6 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
           <NotesOptions
             appState={appState}
             closeOnBlur={closeOnBlur}
-            setLockCloseOnBlur={setLockCloseOnBlur}
             onSubmenuChange={onSubmenuChange}
           />
         )}

app/assets/javascripts/ui_models/app_state/notes_state.ts

@@ -186,8 +186,7 @@ export class NotesState {
   }
 
   async setTrashSelectedNotes(
-    trashed: boolean,
+    trashed: boolean
-    trashButtonRef: RefObject<HTMLButtonElement>
   ): Promise<void> {
     if (trashed) {
       const notesDeleted = await this.deleteNotes(false);
@@ -196,8 +195,6 @@ export class NotesState {
           this.selectedNotes = {};
           this.contextMenuOpen = false;
         });
-      } else {
-        trashButtonRef.current?.focus();
       }
     } else {
       this.application.changeItems<NoteMutator>(