fix(docs): re-initialize search after Astro View Transitions#713
fix(docs): re-initialize search after Astro View Transitions#713CarlosSardo wants to merge 3 commits intobradygaster:devfrom
Conversation
The Search.astro component captured DOM references once at script execution time. After client-side navigation via Astro View Transitions, those references pointed to detached DOM nodes, making search non-functional until a hard refresh. Wrapped all DOM lookups and event listener attachments in an initSearch() function driven by the astro:page-load event, which fires on initial load and after each View Transition. Added 2 Playwright regression tests verifying search works after View Transition navigation. Closes bradygaster#712 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Fixes docs-site search becoming non-functional after Astro View Transitions by re-binding DOM references and event listeners after each client-side navigation.
Changes:
- Refactored
Search.astroto re-initialize DOM element references and event listeners onastro:page-load, while keeping the Pagefind instance cached across navigations. - Added Playwright regression tests that reproduce and validate search behavior after navigating via a search result (View Transition), including Ctrl+K reopening.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| docs/src/components/Search.astro | Re-initialize DOM refs/listeners on astro:page-load; keep Pagefind import cached; avoid duplicate global keydown registration. |
| docs/tests/search.spec.mjs | Adds regression tests covering search modal behavior after View Transition navigation. |
Address PR review comments: - Clear pending debounceTimer in initSearch() to prevent stale callbacks after View Transition navigation - Add explicit href truthy assertion in searchAndNavigate test helper before using it for regex construction
|
🔄 Ralph PR status
Ready for review. Clean fix — re-initializes search DOM refs on astro:page-load. Includes 2 Playwright regression tests. |
🚀 Full Squad Review — fix(docs): re-initialize search after View TransitionsDomain: docs/search
All 21 squad members reviewed and approved. |
🚀 Squad Team Review — PR #713Fixes search becoming non-functional after Astro View Transitions. Wraps DOM lookups in initSearch() driven by astro:page-load event. 2 files, +306/-207. |
|
📋 PR Lifecycle: Team review complete. Labeled \squad:pr-reviewed. Waiting for Dina's review. Add \squad:pr-dina-approved\ when ready to proceed. |
|
👋 Friendly nudge — this PR has had no activity for 7 days. What needs attention:
If this PR is abandoned, please close it. If it's blocked on something external, leave a comment so the team knows. |
|
@CarlosSardo apologies for the request - could you rebase? GH isn't letting me merge this or resolve conflicts. |
|
Thanks @CarlosSardo! Closing this as i picked it all up in #964 |
Summary
Fixes the docs website search becoming non-functional after navigating to a search result via Astro View Transitions.
Closes #712
Problem
The
Search.astrocomponent captured DOM element references (searchBtn,searchModal,searchInput, etc.) once at initial script execution time. After a client-side navigation via View Transitions, Astro swaps the DOM — the old JS references then point to detached nodes, so clicks and keyboard shortcuts silently do nothing. The only workaround was a hard refresh (Ctrl+F5).Solution
Wrapped all DOM lookups and event listener attachments in an
initSearch()function driven by theastro:page-loadevent (fires on initial load AND after each View Transition). This follows the same pattern already used by the theme toggle and copy buttons in the docs site.Key details:
let pagefind) — no redundant re-importskeydownlistener (Ctrl+K, Escape) registered exactly once via guard flagTesting
Added 2 Playwright regression tests in a new
Search after View Transition navigationdescribe block:All 12 tests pass (10 existing + 2 new).
Changed Files
docs/src/components/Search.astro— fix: re-initialize DOM refs onastro:page-loaddocs/tests/search.spec.mjs— test: 2 regression tests for post-navigation searchCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>