Sheet dont works after navigate to other route

[enmanuelmag]

If this issue only occurs in one browser, which browser is a problem?

Opera GX

Describe the bug

When the web render for first time the modal works and open the navbar inside the sheet component. But when I go to another route and then I try open again the sidebat it doesn't work. I need to refresh the page.

What's the expected result?

Open the sidebar (sheet) always when I clic the button marked as trigger.

Link to minimal reproducible example

https://stackblitz.com/~/github.com/enmanuelmag/caputti-planner

Severity

High (P3)

[Frontendland]

Hey @enmanuelmag, thank you for reaching out!

What you are experiencing here is the behavior of Astro's View Transitions API. As per the documentation:

"When you add view transitions to an existing Astro project, some of your scripts may no longer re-run after page navigation like they did with full-page browser refreshes."

So basically what happens is that the event listener gets detached from the DOM when you navigate. As the event listener is no longer present on the page, the Sheet will not open.

You can modify your NavbarMobile.astro component in the following way to ensure its working after navigation when using the View Transitions API:

<script>
  import { modal } from 'webcoreui';

+  document.addEventListener('astro:page-load', () => {
     modal({
       trigger: '.button-custom-side',
       modal: '.sheet-custom-side',
     });
+  });
</script>

Just wrap your modal call into the above event listener. Please note you need to follow the same approach with other interactive elements, such as Modal or Carousel as they all depend on event listeners.

Alternatively, if you're using Astro with one of the supported frameworks, you can also turn NavbarMobile.astro into NavbarMobile.svelte or NavbarMobile.tsx, and call it with a client directive:

<NavbarMobile client:load />

In this case, you won't need to add the astro:page-load event listener. You can read more on how the View Transitions API works here.

I'll close this issue, but please feel free to reopen it if you're still experiencing this!

[enmanuelmag]

Thanks so much. I'll choose the wrap solution in order to dont use too much external frameworks. Your library is very helpful, thanks!