diff --git a/app/assets/javascripts/components/NotesContextMenu.tsx b/app/assets/javascripts/components/NotesContextMenu.tsx index 1d2c1f86de5..c689abd100a 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 } from 'preact/hooks'; +import { useEffect, useRef, useState } from 'preact/hooks'; type Props = { appState: AppState; @@ -12,12 +12,18 @@ const NotesContextMenu = observer(({ appState }: Props) => { const contextMenuRef = useRef(); const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur( contextMenuRef, - (open: boolean) => appState.notes.setContextMenuOpen(open) + (open: boolean) => null ); + const [submenuOpen, setSubmenuOpen] = useState(false); const closeOnClickOutside = (event: MouseEvent) => { if (!contextMenuRef.current?.contains(event.target as Node)) { - appState.notes.setContextMenuOpen(false); + if (submenuOpen) { + setSubmenuOpen(false); + } else { + console.log('here'); + appState.notes.setContextMenuOpen(false); + } } }; @@ -38,6 +44,8 @@ const NotesContextMenu = observer(({ appState }: Props) => { appState={appState} closeOnBlur={closeOnBlur} setLockCloseOnBlur={setLockCloseOnBlur} + submenuOpen={submenuOpen} + setSubmenuOpen={setSubmenuOpen} /> ) : null; diff --git a/app/assets/javascripts/components/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions.tsx index 6e12a3e881b..5fa9de6862a 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 { useEffect, useRef, useState } from 'preact/hooks'; +import { useRef, useState, useEffect } from 'preact/hooks'; import { Disclosure, DisclosureButton, @@ -13,19 +13,16 @@ type Props = { appState: AppState; closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void; setLockCloseOnBlur: (lock: boolean) => void; + onSubmenuChange?: (submenuOpen: boolean) => void; }; export const NotesOptions = observer( - ({ appState, closeOnBlur, setLockCloseOnBlur }: Props) => { + ({ appState, closeOnBlur, setLockCloseOnBlur, onSubmenuChange }: Props) => { const [tagsMenuOpen, setTagsMenuOpen] = useState(false); const [tagsMenuPosition, setTagsMenuPosition] = useState({ top: 0, right: 0, }); - const [lockedBlurAction, setLockedBlurAction] = useState< - Promise | null - >(null); - const [shouldRunLockedBlurAction, setShouldRunLockedBlurAction] = useState(false); const notes = Object.values(appState.notes.selectedNotes); const hidePreviews = !notes.some((note) => !note.hidePreview); @@ -43,6 +40,12 @@ export const NotesOptions = observer( 'cursor-pointer hover:bg-contrast color-text bg-transparent px-3 ' + 'text-left'; + useEffect(() => { + if (onSubmenuChange) { + onSubmenuChange(tagsMenuOpen); + } + }, [tagsMenuOpen, onSubmenuChange]); + return ( <> { setLockCloseOnBlur(true); await appState.notes.setTrashSelectedNotes(!trashed, trashButtonRef); - setLockCloseOnBlur(true); + setLockCloseOnBlur(false); }} > diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx index d1b3fa96eab..f5625cf2d56 100644 --- a/app/assets/javascripts/components/NotesOptionsPanel.tsx +++ b/app/assets/javascripts/components/NotesOptionsPanel.tsx @@ -24,6 +24,11 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => { const buttonRef = useRef(); const panelRef = useRef(); const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen); + const [submenuOpen, setSubmenuOpen] = useState(false); + + const onSubmenuChange = (open: boolean) => { + setSubmenuOpen(open); + }; return ( { > { - if (event.key === 'Escape') { + if (event.key === 'Escape' && !submenuOpen) { setOpen(false); } }} @@ -56,7 +61,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => { { - if (event.key === 'Escape') { + if (event.key === 'Escape' && !submenuOpen) { setOpen(false); buttonRef.current.focus(); } @@ -72,6 +77,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => { appState={appState} closeOnBlur={closeOnBlur} setLockCloseOnBlur={setLockCloseOnBlur} + onSubmenuChange={onSubmenuChange} /> )}