From 461f3ccfa4ffa9c0335f4fbe0557b6bf8f7f14b2 Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Fri, 7 May 2021 18:51:49 -0300
Subject: [PATCH] fix: remove locking closeOnBlur

---
 .../javascripts/components/NotesContextMenu.tsx   | 15 +++------------
 .../javascripts/components/NotesOptions.tsx       | 11 ++---------
 .../javascripts/components/NotesOptionsPanel.tsx  |  1 -
 .../ui_models/app_state/notes_state.ts            |  5 +----
 4 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/components/NotesContextMenu.tsx b/app/assets/javascripts/components/NotesContextMenu.tsx
index c689abd10..f2c4936fd 100644
--- a/app/assets/javascripts/components/NotesContextMenu.tsx
+++ b/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) {
-        setSubmenuOpen(false);
-      } else {
-        console.log('here');
-        appState.notes.setContextMenuOpen(false);
-      }
+      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;
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index 11d4bda71..d54eef0f5 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/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, trashButtonRef);
-            setLockCloseOnBlur(false);
+            await appState.notes.setTrashSelectedNotes(!trashed);
           }}
         >
           <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" />
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index f5625cf2d..b9e655760 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/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}
           />
         )}
diff --git a/app/assets/javascripts/ui_models/app_state/notes_state.ts b/app/assets/javascripts/ui_models/app_state/notes_state.ts
index 4699e316c..96c76c42b 100644
--- a/app/assets/javascripts/ui_models/app_state/notes_state.ts
+++ b/app/assets/javascripts/ui_models/app_state/notes_state.ts
@@ -186,8 +186,7 @@ export class NotesState {
   }
 
   async setTrashSelectedNotes(
-    trashed: boolean,
-    trashButtonRef: RefObject<HTMLButtonElement>
+    trashed: boolean
   ): 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>(