diff --git a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx b/packages/web/src/javascripts/Components/Icon/IconPicker.tsx index d05ae93fe..b3850f727 100644 --- a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx +++ b/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 handleEmojiChange(value)} diff --git a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx index 0773c414e..f6d9d59ae 100644 --- a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx +++ b/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(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} /> {application.featuresController.isVaultsEnabled() && (