fix(shell): scroll restore on Back + reset on new filter (bugs 1, 3)
The shell owns the scroller, so it owns the scroll policy. PageScroller now takes a scrollKey identifying the logical view and keeps a per-view offset in a module-level map, recorded live on scroll: - same key returning (feed -> channel -> Back, filters unchanged) restores where you were (bug 1) -- the feed's scroller unmounts, but the saved offset survives and is re-applied, retried over a few frames so the virtualized list has time to reach its full height; - a new key (feed filters changed) starts at the top of the fresh result set (bug 3). q is normalised out of the feed key so typing doesn't reset. Recording on scroll rather than at unmount matters: by cleanup time the scroller's scrollTop is already zeroed, so a cleanup-read saved 0. Also fixes a Maximum-update-depth loop this introduced: the combined element/fade ref was an inline callback, so React re-attached it every commit and re-ran useScrollFade's state setter. Bound it with useCallback. Adds E2E locks for bugs 1, 3 and 4 (restore on Back, reset on filter, toolbar stays pinned). Full suite 14/14 green on :5173; tsc + knip clean.
This commit is contained in:
@@ -47,4 +47,35 @@ test.describe("feed", () => {
|
||||
.poll(async () => (await renderedIds()).some((id) => id && !before.includes(id)))
|
||||
.toBe(true);
|
||||
});
|
||||
|
||||
// Bug 4 (Platform S4): the toolbar (show/content chips, count, sort, view) is fixed chrome — it
|
||||
// pins in the shell's toolbar band above the scroller, so it stays put while the cards scroll.
|
||||
test("the feed toolbar stays pinned while cards scroll", async ({ page }) => {
|
||||
await openApp(page);
|
||||
const count = page.getByTestId("feed-result-count");
|
||||
await expect(count).toBeVisible();
|
||||
const topBefore = await count.evaluate((el) => el.getBoundingClientRect().top);
|
||||
|
||||
await page.getByRole("main").evaluate((el) => el.scrollBy(0, 4000));
|
||||
|
||||
await expect(count).toBeInViewport();
|
||||
const topAfter = await count.evaluate((el) => el.getBoundingClientRect().top);
|
||||
expect(Math.abs(topAfter - topBefore)).toBeLessThan(4);
|
||||
});
|
||||
|
||||
// Bug 3 (Platform S4): changing a filter is a fresh result set, so the scroll jumps back to the
|
||||
// top rather than stranding you deep in the old list's offset.
|
||||
test("a new filter resets the scroll to the top", async ({ page }) => {
|
||||
await openApp(page);
|
||||
await expect(page.getByTestId("video-card").first()).toBeVisible();
|
||||
|
||||
await page.getByRole("main").evaluate((el) => el.scrollBy(0, 4000));
|
||||
expect(await page.getByRole("main").evaluate((el) => el.scrollTop)).toBeGreaterThan(500);
|
||||
|
||||
// Switch the show filter → a different result set → back to the top.
|
||||
await page.getByTestId("feed-show-all").click();
|
||||
await expect
|
||||
.poll(() => page.getByRole("main").evaluate((el) => el.scrollTop))
|
||||
.toBeLessThan(50);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user