Manage focus when batch editing

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<HTMLDivElement>(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
     ? <AppGrid
       className="sticky top-0 z-10 -mt-2 pt-2"
       contentMain={<div className="flex flex-col gap-2">
         <Note
+          ref={refNote}
           color="gray"
           className={clsx(
             'min-h-[3.5rem] pr-2',

src/components/Container.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx/lite';
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
 
 export default function Container({
   children,
@@ -8,7 +8,9 @@ export default function Container({
   padding = 'normal',
   centered = true,
   spaceChildren = true,
+  ...props
 }: {
+  ref?: RefObject<HTMLDivElement | null>
   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<HTMLDivElement>) {
   const getColorClasses = () => {
     switch (color) {
     case 'gray': return [
@@ -58,13 +60,16 @@ export default function Container({
   };
 
   return (
-    <div className={clsx(
+    <div
+      {...props}
+      className={clsx(
         'flex flex-col items-center justify-center',
         'rounded-lg',
         ...getColorClasses(),
         getPaddingClasses(),
         className,
-    )}>
+      )}
+    >
       <div className={clsx(
         'flex flex-col justify-center w-full',
         centered && 'items-center',

src/components/Note.tsx

@@ -4,13 +4,7 @@ import AnimateItems from './AnimateItems';
 import { IoInformationCircleOutline } from 'react-icons/io5';
 import { clsx } from 'clsx/lite';
 
-export default function Note(props: {
-  icon?: ReactNode
-  animate?: boolean
-  cta?: ReactNode
-  hideIcon?: boolean
-} & ComponentProps<typeof Container>) {
-  const {
+export default function Note({
   icon,
   animate,
   cta,
@@ -18,15 +12,19 @@ export default function Note(props: {
   color = 'blue',
   padding,
   children,
-    ...rest
-  } = props;
-
+  ...props
+}: {
+  icon?: ReactNode
+  animate?: boolean
+  cta?: ReactNode
+  hideIcon?: boolean
+} & ComponentProps<typeof Container>) {
   return (
     <AnimateItems
       type={animate ? 'bottom' : 'none'}
       items={[
         <Container
-          {...rest}
+          {...props}
           key="Banner"
           color={color}
           padding={padding ?? (cta ? 'tight-cta-right' : 'tight')}