fix(web): preserve URL hash when toggling billing cadence#276
Conversation
|
CI Coverage & Test Summary
Suites: 39 passed, 0 failed (39 total) · Tests: 436 passed, 0 failed (447 total) ✅ All reported test suites passed. Coverage artifacts: Updated at: May 18, 2026 at 3:22 PM PDT |
There was a problem hiding this comment.
Pull request overview
Fixes a landing-page UX regression where toggling billing cadence in the /#pricing section drops the URL hash, causing the global scroll handler to scroll the page to the top. The approach preserves the current location.hash when updating query params.
Changes:
- Update
CadenceToggleViewto navigate while explicitly preserving the current URL hash when toggling cadence. - Add a regression test asserting
location.hashremains unchanged after toggling cadence from an initial/#pricingentry.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| apps/web/src/components/billing/CadenceToggle.web.tsx | Switches from setSearchParams to navigate({ search, hash }) to avoid losing the hash during query updates. |
| apps/web/src/components/billing/tests/CadenceToggle.web.test.tsx | Adds a regression test ensuring the URL hash is preserved across cadence toggles. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
`setSearchParams` in React Router v6 navigates to "?" + newParams,
silently dropping the URL hash. On `/#pricing`, toggling Monthly/Annual
changed the hash from `#pricing` to `""`, causing `ScrollToTop` to fire
and jump to the top of the page.
Fix: replace `setSearch(n, { replace: true })` with
`navigate({ search: n.toString(), hash }, { replace: true })` in
`CadenceToggleView`, reading the current hash from `useLocation()`.
Adds regression test asserting hash is preserved across both toggle
directions.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
mei-artificerinnovations
force-pushed
the
mei/fix-275-cadence-toggle-scroll
branch
from
f019874 to
0b5334e
Compare
Last deployed: 15:22 PDT 📱 Mobile preview: Channel 📱 Mobile Preview (OTA Updates)No native code changes detected - using OTA updates only. Step 1: Install Development Build (one-time setup)
Step 2: Load PR Preview Update
Note: You must use the full URL format - just entering the channel name ( Alternative: For local development, use: 📖 See Mobile Build Testing Guide for detailed instructions. |
Problem
Toggling Monthly/Annual on the home page pricing section (
/#pricing) causes the page to scroll to the top. Closes #275.Root cause
setSearchParamsin React Router v6 navigates to"?" + newParams, silently dropping the URL hash. On/#pricing, clicking the toggle changes the URL from/#pricingto/?cadence=annual— hash goes from#pricingto"".ScrollToTop'suseLayoutEffect([pathname, hash])re-runs and callswindow.scrollTo(0, 0)because the hash is now empty.Fix
In
CadenceToggleView, replace:with:
using
useLocation()to read the current hash and pass it through the navigation, so the hash is never dropped.Regression test
Adds a test in
CadenceToggle.web.test.tsxthat mounts the toggle inside aMemoryRouterwith initial entry/#pricingand asserts thatlocation.hashremains#pricingafter clicking both Annual and Monthly buttons.Test plan
CadenceToggletests pass/#pricingon the home page, toggle cadence — page does not scroll to top