diff --git a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx b/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx index 74653c236..1f6981f47 100644 --- a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx +++ b/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx @@ -1,3 +1,4 @@ +import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants'; import { KeyboardKey } from '@/services/ioService'; import { formatSizeToReadableString } from '@standardnotes/filepicker'; import { IconType, SNFile } from '@standardnotes/snjs'; @@ -33,6 +34,7 @@ export const PopoverFileItem: FunctionComponent = ({ }) => { const [fileName, setFileName] = useState(file.name); const [isRenamingFile, setIsRenamingFile] = useState(false); + const itemRef = useRef(null); const fileNameInputRef = useRef(null); useEffect(() => { @@ -58,7 +60,7 @@ export const PopoverFileItem: FunctionComponent = ({ const handleFileNameInputKeyDown = (event: KeyboardEvent) => { if (event.key === KeyboardKey.Enter) { - fileNameInputRef.current?.blur(); + itemRef.current?.focus(); } }; @@ -67,7 +69,11 @@ export const PopoverFileItem: FunctionComponent = ({ }; return ( -
+
{getFileIconComponent( getIconType(file.mimeType),