From d90595bd427b5999f64d6514df7f9b93aa5966e6 Mon Sep 17 00:00:00 2001
From: "Gianmarco Rengucci (freshgiammi)" <rengucci.gianmarco@gmail.com>
Date: Tue, 2 Jul 2024 11:27:40 +0200
Subject: [PATCH 1/2] fix: avoid firing unnecessary preload on focus event

---
 packages/react-router/src/link.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 9ebf2acde3c..203fcbfd417 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -545,6 +545,7 @@ export function useLinkProps<
   options: UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
 ): React.AnchorHTMLAttributes<HTMLAnchorElement> {
   const router = useRouter()
+  const isClicking = React.useRef(false)
   const [isTransitioning, setIsTransitioning] = React.useState(false)
 
   const {
@@ -572,6 +573,8 @@ export function useLinkProps<
     className,
     onClick,
     onFocus,
+    onMouseDown,
+    onMouseUp,
     onMouseEnter,
     onMouseLeave,
     onTouchStart,
@@ -685,14 +688,22 @@ export function useLinkProps<
     })
   }
 
-  // The click handler
+  // The focus handler
   const handleFocus = (e: MouseEvent) => {
-    if (disabled) return
+    if (disabled || isClicking.current) return
     if (preload) {
       doPreload()
     }
   }
 
+  const handleOnMouseDown = (e: MouseEvent) => {
+    isClicking.current = true
+  }
+
+  const handleOnMouseUp = (e: MouseEvent) => {
+    isClicking.current = false
+  }
+
   const handleTouchStart = handleFocus
 
   const handleEnter = (e: MouseEvent) => {
@@ -763,6 +774,8 @@ export function useLinkProps<
       : next.maskedLocation
         ? router.history.createHref(next.maskedLocation.href)
         : router.history.createHref(next.href),
+    onMouseDown: composeHandlers([onMouseDown, handleOnMouseDown]),
+    onMouseUp: composeHandlers([onMouseUp, handleOnMouseUp]),
     onClick: composeHandlers([onClick, handleClick]),
     onFocus: composeHandlers([onFocus, handleFocus]),
     onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),

From cc35b11cdc9799c271e00efe8074dc355d13ea5b Mon Sep 17 00:00:00 2001
From: "Gianmarco Rengucci (freshgiammi)" <rengucci.gianmarco@gmail.com>
Date: Fri, 5 Jul 2024 12:14:50 +0200
Subject: [PATCH 2/2] fixup! fix: avoid firing unnecessary preload on focus
 event

---
 packages/react-router/src/link.tsx | 31 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx
index 203fcbfd417..77f5a5db8be 100644
--- a/packages/react-router/src/link.tsx
+++ b/packages/react-router/src/link.tsx
@@ -545,7 +545,7 @@ export function useLinkProps<
   options: UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
 ): React.AnchorHTMLAttributes<HTMLAnchorElement> {
   const router = useRouter()
-  const isClicking = React.useRef(false)
+  const isPointerDown = React.useRef(false)
   const [isTransitioning, setIsTransitioning] = React.useState(false)
 
   const {
@@ -573,11 +573,9 @@ export function useLinkProps<
     className,
     onClick,
     onFocus,
-    onMouseDown,
-    onMouseUp,
+    onPointerDown,
     onMouseEnter,
     onMouseLeave,
-    onTouchStart,
     ignoreBlocker,
     ...rest
   } = options
@@ -645,7 +643,7 @@ export function useLinkProps<
       ...(onFocus && { onFocus }),
       ...(onMouseEnter && { onMouseEnter }),
       ...(onMouseLeave && { onMouseLeave }),
-      ...(onTouchStart && { onTouchStart }),
+      ...(onPointerDown && { onPointerDown }),
     }
   }
 
@@ -690,22 +688,21 @@ export function useLinkProps<
 
   // The focus handler
   const handleFocus = (e: MouseEvent) => {
-    if (disabled || isClicking.current) return
+    if (disabled) return
     if (preload) {
-      doPreload()
+      // If we're clicking/touching, skip focus preload
+      if (isPointerDown.current) {
+        isPointerDown.current = false
+      } else {
+        doPreload()
+      }
     }
   }
 
-  const handleOnMouseDown = (e: MouseEvent) => {
-    isClicking.current = true
+  const handleOnPointerDown = (e: PointerEvent) => {
+    isPointerDown.current = true
   }
 
-  const handleOnMouseUp = (e: MouseEvent) => {
-    isClicking.current = false
-  }
-
-  const handleTouchStart = handleFocus
-
   const handleEnter = (e: MouseEvent) => {
     if (disabled) return
     const eventTarget = (e.target || {}) as LinkCurrentTargetElement
@@ -774,13 +771,11 @@ export function useLinkProps<
       : next.maskedLocation
         ? router.history.createHref(next.maskedLocation.href)
         : router.history.createHref(next.href),
-    onMouseDown: composeHandlers([onMouseDown, handleOnMouseDown]),
-    onMouseUp: composeHandlers([onMouseUp, handleOnMouseUp]),
+    onPointerDown: composeHandlers([onPointerDown, handleOnPointerDown]),
     onClick: composeHandlers([onClick, handleClick]),
     onFocus: composeHandlers([onFocus, handleFocus]),
     onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
     onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
-    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
     disabled: !!disabled,
     target,
     ...(Object.keys(resolvedStyle).length && { style: resolvedStyle }),