diff --git a/app/javascript/mastodon/components/hover_card_controller.tsx b/app/javascript/mastodon/components/hover_card_controller.tsx index 057ef1aaed..6cd4783175 100644 --- a/app/javascript/mastodon/components/hover_card_controller.tsx +++ b/app/javascript/mastodon/components/hover_card_controller.tsx @@ -23,6 +23,7 @@ export const HoverCardController: React.FC = () => { const [open, setOpen] = useState(false); const [accountId, setAccountId] = useState(); const [anchor, setAnchor] = useState(null); + const isUsingTouchRef = useRef(false); const cardRef = useRef(null); const [setLeaveTimeout, cancelLeaveTimeout] = useTimeout(); const [setEnterTimeout, cancelEnterTimeout, delayEnterTimeout] = useTimeout(); @@ -60,6 +61,12 @@ export const HoverCardController: React.FC = () => { setAccountId(undefined); }; + const handleTouchStart = () => { + // Keeping track of touch events to prevent the + // hover card from being displayed on touch devices + isUsingTouchRef.current = true; + }; + const handleMouseEnter = (e: MouseEvent) => { const { target } = e; @@ -69,6 +76,11 @@ export const HoverCardController: React.FC = () => { return; } + // Bail out if a touch is active + if (isUsingTouchRef.current) { + return; + } + // We've entered an anchor if (!isScrolling && isHoverCardAnchor(target)) { cancelLeaveTimeout(); @@ -127,9 +139,16 @@ export const HoverCardController: React.FC = () => { }; const handleMouseMove = () => { + if (isUsingTouchRef.current) { + isUsingTouchRef.current = false; + } delayEnterTimeout(enterDelay); }; + document.body.addEventListener('touchstart', handleTouchStart, { + passive: true, + }); + document.body.addEventListener('mouseenter', handleMouseEnter, { passive: true, capture: true, @@ -151,6 +170,7 @@ export const HoverCardController: React.FC = () => { }); return () => { + document.body.removeEventListener('touchstart', handleTouchStart); document.body.removeEventListener('mouseenter', handleMouseEnter); document.body.removeEventListener('mousemove', handleMouseMove); document.body.removeEventListener('mouseleave', handleMouseLeave);