useOutagesTableState navigates without scroll:false: every filter and page change jumps the table to the top

[usmanimamu17-create]

---ISSUE---

Problem

All state updates in useOutagesTableState (src/hooks/useOutagesTableState.ts) call router.push without options:

router.push(`?${next.toString()}`);

Next's router.push scrolls to the top of the page by default. Consequences:

• Scrolling a long incident list is impossible while filtering: an operator on row 40 of the table who opens the severity filter and picks "critical" is yanked to the top; paging to page 3 and then page 2 does the same.
• The scroll reset compounds the keystroke debounce issue (companion issue): typing a search also resets scroll, so the operator loses their place on every character.
• The pattern is inconsistent: PaymentsView's drawer uses router.replace(..., { scroll: false }) deliberately, proving the codebase knows the option — the table state simply does not use it.

Root cause

The URL-state helpers were written before the scroll behavior was considered, and scroll: false was never added.

Why this is architecturally hard

1. The fix is router.push(\?${next}`, { scroll: false })insetParam/setMultiParam— but scroll restoration on the *return* direction (Back) also needsuseEffect`-based scroll restoration if the page wants to preserve the previous position, which the URL-only model does not give for free.
2. The same helpers exist in the duplicate Dry.tsx copy (companion issue) — the fix must land in the canonical file and the duplicate deleted, or the two drift again.
3. A test asserting no scroll on navigation requires mocking the router and asserting the options argument — the current tests assert the URL, not the options.

Proposed design

Pass { scroll: false } to both router.push calls, add a test asserting the router receives it, and (optionally) restore scroll position on Back via a scrollRestoration effect.

Acceptance criteria

Service

• Filter/page changes do not scroll the page.
• URL state behavior is unchanged.

Tests

• A test asserts router.push is called with scroll: false.
• Existing table-state tests pass.

Out of scope

The keystroke debounce (tracked separately) and scroll restoration on Back.

Getting started

npm test -- useOutagesTableState

Good first files to read: src/hooks/useOutagesTableState.ts.

[waterWang]

Implemented: PR #444 — router.push(url, { scroll: false }) in both setParam and setMultiParam, with a new test suite (tests/useOutagesTableState-scroll.test.tsx, 6/6 passing) asserting every public action passes the scroll option. URL behavior unchanged.

[ZuLu0890]

@ZuLu0890 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I would love to resolve this issue and give it a higher quality PR

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ZuLu0890 to this issue.

[AbdulSnk]

@AbdulSnk has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I would like to apply for this issue.

Proposed Approach:

Router Navigation Options: Update useOutagesTableState URL navigation calls (e.g., router.push or router.replace) to include { scroll: false } when handling table state updates like pagination and filter changes.

Scroll Position Preservation: Ensure table state transitions preserve the user's current scroll position on the page, eliminating unexpected page jumps to the top during table interactions.

Testing & Verification: Add unit/component tests for useOutagesTableState verifying that navigation options correctly pass scroll: false on filter and page change events.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AbdulSnk to this issue.

[drips-wave]

Congratulations, @AbdulSnk! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @AbdulSnk: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊