diff --git a/packages/react-router/src/link.tsx b/packages/react-router/src/link.tsx index e7707e88103..5471b5c4b9a 100644 --- a/packages/react-router/src/link.tsx +++ b/packages/react-router/src/link.tsx @@ -544,6 +544,7 @@ export function useLinkProps< options: UseLinkPropsOptions, ): React.AnchorHTMLAttributes { const router = useRouter() + const isPointerDown = React.useRef(false) const [isTransitioning, setIsTransitioning] = React.useState(false) const { @@ -571,9 +572,9 @@ export function useLinkProps< className, onClick, onFocus, + onPointerDown, onMouseEnter, onMouseLeave, - onTouchStart, ignoreBlocker, ...rest } = options @@ -641,7 +642,7 @@ export function useLinkProps< ...(onFocus && { onFocus }), ...(onMouseEnter && { onMouseEnter }), ...(onMouseLeave && { onMouseLeave }), - ...(onTouchStart && { onTouchStart }), + ...(onPointerDown && { onPointerDown }), } } @@ -684,15 +685,22 @@ export function useLinkProps< }) } - // The click handler + // The focus handler const handleFocus = (e: MouseEvent) => { if (disabled) return if (preload) { - doPreload() + // If we're clicking/touching, skip focus preload + if (isPointerDown.current) { + isPointerDown.current = false + } else { + doPreload() + } } } - const handleTouchStart = handleFocus + const handleOnPointerDown = (e: PointerEvent) => { + isPointerDown.current = true + } const handleEnter = (e: MouseEvent) => { if (disabled) return @@ -762,11 +770,11 @@ export function useLinkProps< : next.maskedLocation ? router.history.createHref(next.maskedLocation.href) : router.history.createHref(next.href), + 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 }),