From 9906cd2a2054ded189b05fae3b9a3becd857b9da Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Fri, 7 May 2021 15:41:00 -0300
Subject: [PATCH] fix: menu should remain open when showing trash alert

---
 .../components/NotesContextMenu.tsx           |  3 +-
 .../javascripts/components/NotesOptions.tsx   | 29 ++++++++++++++-----
 .../components/NotesOptionsPanel.tsx          |  3 +-
 app/assets/javascripts/components/utils.ts    |  2 ++
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/components/NotesContextMenu.tsx b/app/assets/javascripts/components/NotesContextMenu.tsx
index 1d2c1f86d..c09844647 100644
--- a/app/assets/javascripts/components/NotesContextMenu.tsx
+++ b/app/assets/javascripts/components/NotesContextMenu.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 const NotesContextMenu = observer(({ appState }: Props) => {
   const contextMenuRef = useRef<HTMLDivElement>();
-  const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(
+  const [closeOnBlur, blurLocked, setLockCloseOnBlur] = useCloseOnBlur(
     contextMenuRef,
     (open: boolean) => appState.notes.setContextMenuOpen(open)
   );
@@ -37,6 +37,7 @@ const NotesContextMenu = observer(({ appState }: Props) => {
       <NotesOptions
         appState={appState}
         closeOnBlur={closeOnBlur}
+        blurLocked={blurLocked}
         setLockCloseOnBlur={setLockCloseOnBlur}
       />
     </div>
diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
index 030d35a81..41b5bfb0e 100644
--- a/app/assets/javascripts/components/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions.tsx
@@ -2,7 +2,7 @@ import { AppState } from '@/ui_models/app_state';
 import { Icon, IconType } from './Icon';
 import { Switch } from './Switch';
 import { observer } from 'mobx-react-lite';
-import { useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import {
   Disclosure,
   DisclosureButton,
@@ -12,16 +12,18 @@ import {
 type Props = {
   appState: AppState;
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
+  blurLocked: boolean;
   setLockCloseOnBlur: (lock: boolean) => void;
 };
 
 export const NotesOptions = observer(
-  ({ appState, closeOnBlur, setLockCloseOnBlur }: Props) => {
+  ({ appState, closeOnBlur, blurLocked, setLockCloseOnBlur }: Props) => {
     const [tagsMenuOpen, setTagsMenuOpen] = useState(false);
     const [tagsMenuPosition, setTagsMenuPosition] = useState({
       top: 0,
       right: 0,
     });
+    const [shouldTrashNotes, setShouldTrashNotes] = useState(false);
 
     const notes = Object.values(appState.notes.selectedNotes);
     const hidePreviews = !notes.some((note) => !note.hidePreview);
@@ -39,6 +41,23 @@ export const NotesOptions = observer(
       'cursor-pointer hover:bg-contrast color-text bg-transparent px-3 ' +
       'text-left';
 
+    useEffect(() => {
+      const openTrashAlert = async () => {
+        if (shouldTrashNotes && blurLocked) {
+          await appState.notes.setTrashSelectedNotes(!trashed, trashButtonRef);
+          setShouldTrashNotes(false);
+          setLockCloseOnBlur(false);
+        }
+      };
+      openTrashAlert();
+    }, [
+      appState.notes,
+      blurLocked,
+      setLockCloseOnBlur,
+      shouldTrashNotes,
+      trashed,
+    ]);
+
     return (
       <>
         <Switch
@@ -167,12 +186,8 @@ export const NotesOptions = observer(
           onBlur={closeOnBlur}
           className={`${buttonClass} py-1.5`}
           onClick={async () => {
+            setShouldTrashNotes(true);
             setLockCloseOnBlur(true);
-            await appState.notes.setTrashSelectedNotes(
-              !trashed,
-              trashButtonRef
-            );
-            setLockCloseOnBlur(false);
           }}
         >
           <Icon type={IconType.Trash} className={iconClass} />
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
index d1b3fa96e..47e429b94 100644
--- a/app/assets/javascripts/components/NotesOptionsPanel.tsx
+++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -23,7 +23,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
   });
   const buttonRef = useRef<HTMLButtonElement>();
   const panelRef = useRef<HTMLDivElement>();
-  const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen);
+  const [closeOnBlur, blurLocked, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen);
 
   return (
     <Disclosure
@@ -71,6 +71,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
           <NotesOptions
             appState={appState}
             closeOnBlur={closeOnBlur}
+            blurLocked={blurLocked}
             setLockCloseOnBlur={setLockCloseOnBlur}
           />
         )}
diff --git a/app/assets/javascripts/components/utils.ts b/app/assets/javascripts/components/utils.ts
index 13e025192..eab1724de 100644
--- a/app/assets/javascripts/components/utils.ts
+++ b/app/assets/javascripts/components/utils.ts
@@ -11,6 +11,7 @@ export function useCloseOnBlur(
   setOpen: (open: boolean) => void
 ): [
   (event: { relatedTarget: EventTarget | null }) => void,
+  boolean,
   StateUpdater<boolean>
 ] {
   const [locked, setLocked] = useState(false);
@@ -26,6 +27,7 @@ export function useCloseOnBlur(
       },
       [container, setOpen, locked]
     ),
+    locked,
     setLocked,
   ];
 }