From 806250a30e978ececd99ef16126db8394a759b14 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Wed, 14 Aug 2024 16:52:37 +0100
Subject: [PATCH] Refocus the PDF viewer after zooming with a keyboard shortcut
 (#19959)

GitOrigin-RevId: 61961ca4d5e6362923c7157296308c213649d4f3
---
 .../pdf-preview/components/pdf-js-viewer.tsx      | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx
index 6ac2466f13..d9813b9a56 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx
@@ -439,7 +439,7 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
 
   const handleKeyDown = useCallback(
     event => {
-      if (!initialised) {
+      if (!initialised || !pdfJsWrapper) {
         return
       }
       if (event.metaKey || event.ctrlKey) {
@@ -448,26 +448,30 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
           case '=':
             event.preventDefault()
             setZoom('zoom-in')
+            pdfJsWrapper.container.focus()
             break
 
           case '-':
             event.preventDefault()
             setZoom('zoom-out')
+            pdfJsWrapper.container.focus()
             break
 
           case '0':
             event.preventDefault()
             setZoom('page-width')
+            pdfJsWrapper.container.focus()
             break
 
           case '9':
             event.preventDefault()
             setZoom('page-height')
+            pdfJsWrapper.container.focus()
             break
         }
       }
     },
-    [initialised, setZoom]
+    [initialised, setZoom, pdfJsWrapper]
   )
 
   useMouseWheelZoom(pdfJsWrapper, setScale)
@@ -494,12 +498,7 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
       onKeyDown={handleKeyDown}
       tabIndex={-1}
     >
-      <div
-        className="pdfjs-viewer-inner"
-        tabIndex={0}
-        onKeyDown={handleKeyDown}
-        role="tabpanel"
-      >
+      <div className="pdfjs-viewer-inner" tabIndex={0} role="tabpanel">
         <div className="pdfViewer" />
       </div>
       {toolbarInfoLoaded && (