Suggestion fix for "Pagefind requires a refresh to function when ViewTransitions is enabled"

[blopker]

Hey! I was able to get Pagefind to continue working, even with <ViewTransitions /> enabled. The thing that stops working is just the Search button. Keyboard shortcuts still work, for example. What happens is the Search button is replaced on transition and it loses the click event listener. One fix is to attach the event listener to the document instead. Although the fix I went with was to keep the whole header from getting replaced on transition. I added transition:persist to the header element in Header.astro:

---
import Container from "@components/Container.astro";
import Link from "@components/Link.astro";
import { SITE } from "@consts";
---

<header transition:persist>
...
</header>

That keeps the Search button working, and the header stays in place during page transitions.

[trevortylerlee]

Thanks again! For some reason adding transition:persist to the header didn't solve the issue for me.

I ended up using your other solution but it'd be nice to use transition:persist instead.

[blopker]

I see. I forgot that I had also moved transition:persist from the <Search> component in PageFind.asto to the parent div with id="backdrop":

<div transition:persist
  id="backdrop"
  class="..."
>
  <div
    id="pagefind-container"
    class="..."
  >
    <Search
      id="search"
      className="pagefind-ui"
      uiOptions={{
        showImages: false,
        excerptLength: 15,
        resetStyles: false,
      }}
    />

With this change, the script in PageFind.astro also does not need to be inline any more, saving some page weight.

[trevortylerlee]

Thanks again!