chore: tag context menu focus [skip e2e]

packages/web/src/javascripts/Components/Icon/IconPicker.tsx

@@ -16,6 +16,7 @@ type Props = {
   useIconGrid?: boolean
   iconGridClassName?: string
   className?: string
+  autoFocus?: boolean
 }
 
 const TabButton = forwardRef(
@@ -51,7 +52,15 @@ const TabButton = forwardRef(
   },
 )
 
-const IconPicker = ({ selectedValue, onIconChange, platform, className, useIconGrid, iconGridClassName }: Props) => {
+const IconPicker = ({
+  selectedValue,
+  onIconChange,
+  platform,
+  className,
+  useIconGrid,
+  iconGridClassName,
+  autoFocus,
+}: Props) => {
   const iconKeys = useMemo(() => Object.keys(IconNameToSvgMapping), [])
 
   const iconOptions = useMemo(
@@ -156,7 +165,7 @@ const IconPicker = ({ selectedValue, onIconChange, platform, className, useIconG
             <DecoratedInput
               ref={emojiInputRef}
               autocomplete={false}
-              autofocus={emojiInputFocused}
+              autofocus={autoFocus ?? emojiInputFocused}
               type="text"
               value={emojiInputValue as string}
               onChange={(value) => handleEmojiChange(value)}

packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite'
-import { useCallback, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
@@ -61,6 +61,13 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
   const tagCreatedAt = useMemo(() => formatDateForContextMenu(selectedTag.created_at), [selectedTag.created_at])
 
   const titleInputRef = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (contextMenuOpen) {
+      setTimeout(() => {
+        titleInputRef.current?.focus()
+      })
+    }
+  }, [contextMenuOpen])
 
   const saveTitle = useCallback(
     (closeMenu = false) => {
@@ -125,6 +132,7 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
           className={'py-1.5 md:px-3'}
           useIconGrid={true}
           iconGridClassName="max-h-30"
+          autoFocus={false}
         />
         <MenuSection>
           {application.featuresController.isVaultsEnabled() && (