diff --git a/static/js/components/shared/showcase/ShowcaseView.js b/static/js/components/shared/showcase/ShowcaseView.js index 3406cc12..f8f4c794 100644 --- a/static/js/components/shared/showcase/ShowcaseView.js +++ b/static/js/components/shared/showcase/ShowcaseView.js @@ -54,6 +54,13 @@ export async function loadExampleImages(images, modelHash, previewUrl = '') { const showcaseTab = document.getElementById('showcase-tab'); if (!showcaseTab) return; + // Fresh load of a model's examples: reset the gallery position so a + // previously viewed model's active index / expansion state never leaks + // into this one (the modal is a singleton, state is module-level) + galleryState.activeIndex = 0; + galleryState.expanded = false; + lastNavDirection = 1; + // First fetch local example files let localFiles = []; diff --git a/tests/frontend/components/showcase.gallery.test.js b/tests/frontend/components/showcase.gallery.test.js index 57883c3d..79e19c58 100644 --- a/tests/frontend/components/showcase.gallery.test.js +++ b/tests/frontend/components/showcase.gallery.test.js @@ -288,6 +288,35 @@ describe('Showcase gallery', () => { vi.unstubAllGlobals(); }); + it('resets the gallery position when a new model is loaded', async () => { + const { renderShowcaseContent, loadExampleImages, updateMainDisplay } = await import(SHOWCASE_MODULE); + + // Model A: expand and navigate to the third example + document.body.innerHTML = `