diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx index d555d94f9..1ca005cdf 100644 --- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx +++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx @@ -41,7 +41,7 @@ export const AttachedFilesButton: FunctionComponent = observer( const buttonRef = useRef(null) const panelRef = useRef(null) const containerRef = useRef(null) - const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen) + const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen, true) useEffect(() => { if (appState.filePreviewModal.isOpen) { diff --git a/app/assets/javascripts/Hooks/useCloseOnBlur.ts b/app/assets/javascripts/Hooks/useCloseOnBlur.ts index 0396859c5..9655a930c 100644 --- a/app/assets/javascripts/Hooks/useCloseOnBlur.ts +++ b/app/assets/javascripts/Hooks/useCloseOnBlur.ts @@ -8,16 +8,20 @@ import { StateUpdater, useCallback, useState } from 'preact/hooks' export function useCloseOnBlur( container: { current?: HTMLDivElement | null }, setOpen: (open: boolean) => void, + keepOpenOnDialogs = false, ): [(event: { relatedTarget: EventTarget | null }) => void, StateUpdater] { const [locked, setLocked] = useState(false) return [ useCallback( function onBlur(event: { relatedTarget: EventTarget | null }) { - if (!locked && !container.current?.contains(event.relatedTarget as Node)) { - setOpen(false) - } + setTimeout(() => { + const keepOpen = keepOpenOnDialogs && document.activeElement?.closest('[role="dialog"], .sk-modal') + if (!keepOpen && !locked && !container.current?.contains(event.relatedTarget as Node)) { + setOpen(false) + } + }) }, - [container, setOpen, locked], + [keepOpenOnDialogs, locked, container, setOpen], ), setLocked, ]