From 377f641dd4c16b49ae9c8456c7e9628fbf313f89 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 27 Jan 2025 10:02:21 +0000
Subject: [PATCH] Merge pull request #23035 from overleaf/dp-pdf-scroll-cmd

Only zoom pdf if CTRL/CMD is pressed before mousewheel event fires

GitOrigin-RevId: 772f2f699d57f0ebded2132efc1d6e62f1c5a5d5
---
 .../pdf-preview/hooks/use-mouse-wheel-zoom.ts | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/js/features/pdf-preview/hooks/use-mouse-wheel-zoom.ts b/services/web/frontend/js/features/pdf-preview/hooks/use-mouse-wheel-zoom.ts
index 2569b94c2b..1691d75d52 100644
--- a/services/web/frontend/js/features/pdf-preview/hooks/use-mouse-wheel-zoom.ts
+++ b/services/web/frontend/js/features/pdf-preview/hooks/use-mouse-wheel-zoom.ts
@@ -16,6 +16,15 @@ export default function useMouseWheelZoom(
 ) {
   const isZoomingRef = useRef(false)
 
+  // To avoid accidental pdf when pressing CMD/CTRL when the pdf scroll still has
+  // momentum, we only zoom if CMD/CTRL is pressed before the scroll starts. These refs
+  // keep track of if the pdf is currently scrolling.
+  // https://github.com/overleaf/internal/issues/20772
+  const isScrollingRef = useRef(false)
+  const isScrollingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  )
+
   const performZoom = useCallback(
     (event: WheelEvent, pdfJsWrapper: PDFJSWrapper) => {
       // First, we calculate and set the new scale
@@ -61,7 +70,7 @@ export default function useMouseWheelZoom(
   useEffect(() => {
     if (pdfJsWrapper) {
       const wheelListener = (event: WheelEvent) => {
-        if (event.metaKey || event.ctrlKey) {
+        if ((event.metaKey || event.ctrlKey) && !isScrollingRef.current) {
           event.preventDefault()
 
           if (!isZoomingRef.current) {
@@ -73,6 +82,15 @@ export default function useMouseWheelZoom(
               isZoomingRef.current = false
             }, 5)
           }
+        } else {
+          isScrollingRef.current = true
+          if (isScrollingTimeoutRef.current) {
+            clearTimeout(isScrollingTimeoutRef.current)
+          }
+
+          isScrollingTimeoutRef.current = setTimeout(() => {
+            isScrollingRef.current = false
+          }, 100)
         }
       }