Use with Sveltekit navigation: potential issue (or confusion)

[callumflack]

Elegant & useful component, thanks!

If I use it as a navigation dialog, I come up against a few issues (or confusion, I'm not sure).

If I use the modal in a __layout file, the modal never closes with a route change. Perhaps this is correct behaviour on the part of Sveltekit for components within a __layout. If so, does anyone know how I might destroy the component on route change? Can SvK's { navigating } from '$app/stores' be used to close() it?

Kapture.2021-12-10.at.22.18.20.mp4

To mitigate this, I can use the modal in a component that wraps every page (which is what the __layout is really for, but I guess I get the component destroyed for free each page change). However, when I do this, the page never scrolls back to the window top (as SvK is supposed to do, noted here). Again, this might be a SvK thing, but it is directly related to the working of this Modal.

Kapture.2021-12-10.at.22.19.07.mp4

[callumflack]

For dummies like me, the simplest way to handle this is:

import { page, navigating } from "$app/stores";

navigating.subscribe(() => {
    close(YourModalComponent);
  });

This fixes both "on route change" issues: closing the modal component and scrolling to the top of each page

[flekschas]

Sorry my belated reply. I am glad you found out how to fix the issue 🎉