Toast does not always dispose

[OrbisK]

Environment

• Operating System: Linux
• Node Version: v20.12.0
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.8
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools, compatibilityDate, future
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.2

Reproduction

https://codesandbox.io/p/devbox/white-butterfly-699yhh

Description

1. Open the modal via the open button
2. Open toast(s) via the open button
3. click modal overlay to dispose it
4. click any toast (dont click close button)
5. mouse leave does not count down toasts anymore (click outside does enable countdown again)

---

You can also do this programmatically by closing the modal while adding toasts.

Additional context

No response

Logs

[Gui-Fernandes21]

This behavior is actually expected due to how the modal component handles focus management by default. When the modal is open, it locks the focus to maintain accessibility—this means that interactions outside of the modal (like with toasts) can be affected.

The Nuxt UI Toast component uses the reka-ui Toast as a base. The default behavior is to only stop the countdown when the toast is hovered over or when it is in focus. Therefore, when the modal is opened the Toast cannot be focused when clicked, so the countdown does not stop.

To prevent the modal from locking focus and interfering with toast behavior, you can pass the :modal="false" prop to the component. This will disable focus trapping, and the toast dismissal countdown should work normally again after the modal is closed.

[OrbisK]

You are right.

🤔 My issue is actually not 100% like this, but it was close to the behavior I am facing. I think I have to try to reproduce the "random" one. Sometimes event without clicking toast, they will not count down in combination with modals. To close them I have to focus and unfocus them.

I will close the issue for now. If i can reproduce this, I will reopen it :)