From ae6bd4c07f75cca4067bcc26be17a890d07073b1 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 9 Feb 2023 21:38:38 +0530
Subject: [PATCH] fix: Fixed issue where keyboard navigation in file preview
 modal would not work until you clicked inside

---
 .../Components/FilePreview/FilePreviewModal.tsx          | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
index 481adacde..8fe0501ed 100644
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -82,9 +82,9 @@ const FilePreviewModal = observer(({ application, viewControllerManager }: Props
     return currentFile ? getFileIconComponent(getIconForFileType(currentFile.mimeType), 'w-6 h-6 flex-shrink-0') : null
   }, [currentFile])
 
-  const focusInputOnMount = useCallback((input: HTMLInputElement | null) => {
-    if (input) {
-      input.focus()
+  const focusElementOnMount = useCallback((element: HTMLElement | null) => {
+    if (element) {
+      element.focus()
     }
   }, [])
 
@@ -158,6 +158,7 @@ const FilePreviewModal = observer(({ application, viewControllerManager }: Props
         className="flex h-full w-full flex-col focus:shadow-none focus:outline-none"
         tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
         onKeyDown={keyDownHandler}
+        ref={focusElementOnMount}
       >
         <div className="min-h-6 hidden flex-shrink-0 flex-wrap items-center justify-between gap-2 border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none md:flex">
           <div className="flex items-center">
@@ -180,7 +181,7 @@ const FilePreviewModal = observer(({ application, viewControllerManager }: Props
                     <Icon type="check" size="small" />
                   </button>,
                 ]}
-                ref={mergeRefs([renameInputRef, focusInputOnMount])}
+                ref={mergeRefs([renameInputRef, focusElementOnMount])}
               />
             ) : (
               <span className="ml-3 font-medium">{currentFile.name}</span>