From 1bdda366d04bee25a8e428e2845a318975477a87 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 24 Mar 2022 22:07:18 +0530
Subject: [PATCH] fix: popover closing when renaming file (#950)

---
 .../AttachedFilesPopover/PopoverFileItem.tsx           | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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<PopoverFileItemProps> = ({
 }) => {
   const [fileName, setFileName] = useState(file.name);
   const [isRenamingFile, setIsRenamingFile] = useState(false);
+  const itemRef = useRef<HTMLDivElement>(null);
   const fileNameInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -58,7 +60,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
 
   const handleFileNameInputKeyDown = (event: KeyboardEvent) => {
     if (event.key === KeyboardKey.Enter) {
-      fileNameInputRef.current?.blur();
+      itemRef.current?.focus();
     }
   };
 
@@ -67,7 +69,11 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   };
 
   return (
-    <div className="flex items-center justify-between p-3">
+    <div
+      ref={itemRef}
+      className="flex items-center justify-between p-3 focus:shadow-none"
+      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+    >
       <div className="flex items-center">
         {getFileIconComponent(
           getIconType(file.mimeType),