From b897de3e5ecb2ac91e15c3bc5b7f7b563d78ed9d Mon Sep 17 00:00:00 2001 From: WithoutPants <53250216+WithoutPants@users.noreply.github.com> Date: Wed, 11 Sep 2024 11:50:40 +1000 Subject: [PATCH] Fix hover scrubber error in Firefox (#5243) --- ui/v2.5/src/components/Shared/HoverScrubber.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/v2.5/src/components/Shared/HoverScrubber.tsx b/ui/v2.5/src/components/Shared/HoverScrubber.tsx index e9f3f8209..8fd97e1a7 100644 --- a/ui/v2.5/src/components/Shared/HoverScrubber.tsx +++ b/ui/v2.5/src/components/Shared/HoverScrubber.tsx @@ -1,6 +1,9 @@ import React, { useMemo } from "react"; import cx from "classnames"; +// #5231: TouchEvent is not defined on all browsers +const touchEventDefined = window.TouchEvent !== undefined; + interface IHoverScrubber { totalSprites: number; activeIndex: number | undefined; @@ -24,7 +27,7 @@ export const HoverScrubber: React.FC = ({ let x = 0; if (e.nativeEvent instanceof MouseEvent) { x = e.nativeEvent.offsetX; - } else if (e.nativeEvent instanceof TouchEvent) { + } else if (touchEventDefined && e.nativeEvent instanceof TouchEvent) { x = e.nativeEvent.touches[0].clientX - e.currentTarget.getBoundingClientRect().x; @@ -47,7 +50,8 @@ export const HoverScrubber: React.FC = ({ if ( (e instanceof MouseEvent && relatedTarget !== e.target) || - (e instanceof TouchEvent && + (touchEventDefined && + e instanceof TouchEvent && document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)) ) return; @@ -70,7 +74,8 @@ export const HoverScrubber: React.FC = ({ if ( (e instanceof MouseEvent && relatedTarget !== e.target) || - (e instanceof TouchEvent && + (touchEventDefined && + e instanceof TouchEvent && document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)) ) return;