diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx index 5883bbed79..1334e88c19 100644 --- a/ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx +++ b/ui/v2.5/src/components/Scenes/SceneMarkerWallPanel.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Form } from "react-bootstrap"; import * as GQL from "src/core/generated-graphql"; import Gallery, { @@ -243,8 +243,14 @@ const MarkerWall: React.FC = ({ }); }, [markers, erroredImgs, handleError]); + // Guard against duplicate clicks - react-photo-gallery can dispatch + // the onClick handler twice for a single click event + const lastClickTime = useRef(0); const onClick = useCallback( (event, { index }) => { + const now = Date.now(); + if (now - lastClickTime.current < 100) return; + lastClickTime.current = now; history.push(photos[index].link); }, [history, photos] diff --git a/ui/v2.5/src/components/Scenes/SceneWallPanel.tsx b/ui/v2.5/src/components/Scenes/SceneWallPanel.tsx index f9a42dd489..3acf25cb34 100644 --- a/ui/v2.5/src/components/Scenes/SceneWallPanel.tsx +++ b/ui/v2.5/src/components/Scenes/SceneWallPanel.tsx @@ -258,8 +258,14 @@ const SceneWall: React.FC = ({ }); }, [scenes, sceneQueue, erroredImgs, handleError]); + // Guard against duplicate clicks - react-photo-gallery can dispatch + // the onClick handler twice for a single click event + const lastClickTime = useRef(0); const onClick = useCallback( (event, { index }) => { + const now = Date.now(); + if (now - lastClickTime.current < 100) return; + lastClickTime.current = now; history.push(photos[index].link); }, [history, photos]