diff --git a/packages/sandcastle/src/App.tsx b/packages/sandcastle/src/App.tsx index 8096eb8632f6..ffc5a08914ab 100644 --- a/packages/sandcastle/src/App.tsx +++ b/packages/sandcastle/src/App.tsx @@ -399,26 +399,24 @@ function App() { if (!confirmLeave()) { return; } - // Load the gallery item every time it's clicked - loadGalleryItem(item.id); const searchParams = new URLSearchParams(window.location.search); - if ( - !searchParams.has("id") || - (searchParams.has("id") && searchParams.get("id") !== item.id) - ) { + const isAlreadyActive = + searchParams.has("id") && searchParams.get("id") === item.id; + + if (!isAlreadyActive) { // only push state if it's not the current url to prevent duplicated in history window.history.pushState({}, "", `${getBaseUrl()}?id=${item.id}`); - if ( - !searchParams.has("id") || - (searchParams.has("id") && searchParams.get("id") !== item.id) - ) { - // only push state if it's not the current url to prevent duplicated in history - window.history.pushState({}, "", `${getBaseUrl()}?id=${item.id}`); - } - if (switchToCode) { - setLeftPanel("editor"); + } + + if (switchToCode) { + if (!isAlreadyActive) { + loadGalleryItem(item.id); } + setLeftPanel("editor"); + } else { + // Load the gallery item every time it's clicked to act as a "rerun" button + loadGalleryItem(item.id); } }, [loadGalleryItem, confirmLeave], diff --git a/packages/sandcastle/src/Gallery.tsx b/packages/sandcastle/src/Gallery.tsx index 8190aa2d8c0d..b1ab0394c574 100644 --- a/packages/sandcastle/src/Gallery.tsx +++ b/packages/sandcastle/src/Gallery.tsx @@ -217,8 +217,11 @@ export const GalleryCard = memo(function GalleryCard({ { + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); loadDemo(item, true); + return false; }} className="open-code-btn" />