fix: revert changes to closeOnBlur and add closeOnClickOutside

standardnotes · May 4, 2021 · 45357c1 · 45357c1
1 parent 15db476
commit 45357c1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/app/assets/javascripts/components/NotesContextMenu.tsx b/app/assets/javascripts/components/NotesContextMenu.tsx
@@ -15,10 +15,16 @@ const NotesContextMenu = observer(({ appState }: Props) => {
     (open: boolean) => appState.notes.setContextMenuOpen(open)
   );
 
+  const closeOnClickOutside = (event: MouseEvent) => {
+    if (!contextMenuRef.current?.contains(event.target as Node)) { 
+      appState.notes.setContextMenuOpen(false);
+    }
+  };
+
   useEffect(() => {
-    document.addEventListener('click', closeOnBlur);
+    document.addEventListener('click', closeOnClickOutside);
     return () => {
-      document.removeEventListener('click', closeOnBlur);
+      document.removeEventListener('click', closeOnClickOutside);
     };
   });
 

diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx
@@ -6,10 +6,7 @@ import { useRef } from 'preact/hooks';
 
 type Props = {
   appState: AppState;
-  closeOnBlur: (event: {
-    relatedTarget: EventTarget | null;
-    target: EventTarget | null;
-  }) => void;
+  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
   setLockCloseOnBlur: (lock: boolean) => void;
 };
 

diff --git a/app/assets/javascripts/components/utils.ts b/app/assets/javascripts/components/utils.ts
@@ -10,23 +10,16 @@ export function useCloseOnBlur(
   container: { current: HTMLDivElement },
   setOpen: (open: boolean) => void
 ): [
-  (event: {
-    relatedTarget: EventTarget | null;
-    target: EventTarget | null;
-  }) => void,
+  (event: { relatedTarget: EventTarget | null }) => void,
   StateUpdater<boolean>
 ] {
   const [locked, setLocked] = useState(false);
   return [
     useCallback(
-      function onBlur(event: {
-        relatedTarget: EventTarget | null;
-        target: EventTarget | null;
-      }) {
+      function onBlur(event: { relatedTarget: EventTarget | null }) {
         if (
           !locked &&
-          !container.current?.contains(event.relatedTarget as Node) &&
-          !container.current?.contains(event.target as Node)
+          !container.current?.contains(event.relatedTarget as Node)
         ) {
           setOpen(false);
         }