diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx index dc64bdd1..6a73634b 100644 --- a/src/admin/AdminAppMenu.tsx +++ b/src/admin/AdminAppMenu.tsx @@ -162,9 +162,6 @@ export default function AdminAppMenu({ } else { setSelectedPhotoIds?.([]); } - if (document.activeElement instanceof HTMLElement) { - document.activeElement.blur(); - } }, shouldPreventDefault: false, }); diff --git a/src/components/more/MoreMenu.tsx b/src/components/more/MoreMenu.tsx index a7fc334c..9fbb4e31 100644 --- a/src/components/more/MoreMenu.tsx +++ b/src/components/more/MoreMenu.tsx @@ -9,6 +9,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { clsx } from 'clsx/lite'; import { FiMoreHorizontal } from 'react-icons/fi'; import MoreMenuItem from './MoreMenuItem'; +import { clearGlobalFocus } from '@/utility/dom'; export type MoreMenuSection = { label?: string @@ -49,6 +50,7 @@ export default function MoreMenu({ const dismissMenu = useCallback(() => { setIsOpen(false); + clearGlobalFocus(); }, [setIsOpen]); useEffect(() => { diff --git a/src/components/primitives/TooltipPrimitive.tsx b/src/components/primitives/TooltipPrimitive.tsx index d33afdee..d3d79fb0 100644 --- a/src/components/primitives/TooltipPrimitive.tsx +++ b/src/components/primitives/TooltipPrimitive.tsx @@ -7,6 +7,7 @@ import useSupportsHover from '@/utility/useSupportsHover'; import clsx from 'clsx/lite'; import useClickInsideOutside from '@/utility/useClickInsideOutside'; import KeyCommand from './KeyCommand'; +import { clearGlobalFocus } from '@/utility/dom'; export default function TooltipPrimitive({ content: contentProp, @@ -76,14 +77,6 @@ export default function TooltipPrimitive({ : contentProp; - // Blur after clicking to prevent keyboard focus being stuck - // when tooltip is combined with a button - const blurActiveElement = () => { - if (document.activeElement instanceof HTMLElement) { - document.activeElement.blur(); - } - }; - return ( { setIsOpen(!isOpen); - blurActiveElement(); + // Blur after clicking to prevent keyboard focus being stuck + // when tooltip is combined with a button + clearGlobalFocus(); }} className={clsx('link', classNameTrigger)} > @@ -105,7 +100,7 @@ export default function TooltipPrimitive({ : {children} } diff --git a/src/utility/dom.ts b/src/utility/dom.ts index a8e92ecd..aa778139 100644 --- a/src/utility/dom.ts +++ b/src/utility/dom.ts @@ -18,3 +18,9 @@ export const isElementEntirelyInViewport = ( return false; } }; + +export const clearGlobalFocus = () => { + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } +};