Use the popover api

[Wykks]

Hello,

I know this is a tough one, so you may just ignore this issue if you don't run into this 😅

When using the native browser api to show a Modal, the toast show behind the modal because of the special layer created by the native modal api. To workaround this issue, you could use the native popover api when available (with https://qwikui.com/docs/headless/popover/ of course 🙂 ).

Just putting this here, I'm very sorry to not have the time to help you there... I'm very busy theses days

[diecodev]

Hi!

I would like to use the popover api too, but that is not possible with this code. In fact, in order to implement the Popover API I would have to rewrite the whole library, but don't worry, I'm trying to find some way to move the library code out of the main DOM tree.

[diecodev]

EXPLANATION

The reason why I can't use the Popover API is because it needs a trigger, which must be a button. So the toast() function could not be used as it is being used. Therefore, it is necessary to look for a way to take the code of the library out of the main DOM tree, this way, only for hierarchy this will be shown above any element that is rendered inside the body.

[diecodev]

Hi @Wykks 👋 — this is now supported! Toasts can be promoted to the top layer via the native Popover API, so they render above native modal dialogs. It's opt-in: just set the topLayer prop to true on the Toaster:

<Toaster topLayer={true} />

It's already testable in the Qwik v2 beta:

pnpm add qwik-sonner@beta

The stable version will ship once Qwik v2 itself is stable, so I'll keep this issue open until then and close it once the stable release is out.

Full changelog: https://github.com/diecodev/qwik-sonner/releases/tag/v2.0.0-beta.1

[Wykks]

Awesome! I havent yet tried Qwik v2, I'm waiting for the stable release, but thanks for this, that's really cool 👍