diff --git a/src/admin/AdminBatchEditPanelClient.tsx b/src/admin/AdminBatchEditPanelClient.tsx index fddc4392..710ffb3d 100644 --- a/src/admin/AdminBatchEditPanelClient.tsx +++ b/src/admin/AdminBatchEditPanelClient.tsx @@ -6,7 +6,7 @@ import AppGrid from '@/components/AppGrid'; import { useAppState } from '@/state/AppState'; import { clsx } from 'clsx/lite'; import { IoCloseSharp } from 'react-icons/io5'; -import { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { TAG_FAVS, Tags } from '@/tag'; import { usePathname } from 'next/navigation'; import { PATH_GRID_INFERRED } from '@/app/paths'; @@ -25,6 +25,8 @@ export default function AdminBatchEditPanelClient({ }: { uniqueTags: Tags }) { + const refNote = useRef(null); + const pathname = usePathname(); const { @@ -148,15 +150,24 @@ export default function AdminBatchEditPanelClient({ /> ; - return ( + const shouldShowPanel = isUserSignedIn && pathname === PATH_GRID_INFERRED && - selectedPhotoIds !== undefined - ) + selectedPhotoIds !== undefined; + + useEffect(() => { + // Steal focus from Admin Menu to hide tooltip + if (shouldShowPanel) { + refNote.current?.focus(); + } + }, [shouldShowPanel]); + + return shouldShowPanel ? children: ReactNode className?: string color?: 'gray' | 'gray-border' | 'blue' | 'red' | 'yellow' @@ -20,7 +22,7 @@ export default function Container({ 'tight-cta-right-left' centered?: boolean spaceChildren?: boolean -} ) { +} & HTMLAttributes) { const getColorClasses = () => { switch (color) { case 'gray': return [ @@ -58,13 +60,16 @@ export default function Container({ }; return ( -
+
) { - const { - icon, - animate, - cta, - hideIcon, - color = 'blue', - padding, - children, - ...rest - } = props; - return (