diff --git a/app/assets/javascripts/components/NotesContextMenu.tsx b/app/assets/javascripts/components/NotesContextMenu.tsx index da6378c3c..b2f9aa323 100644 --- 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 index 3a816de94..ebed8810e 100644 --- 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 index 70b9f398b..13e025192 100644 --- 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 ] { 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); }