fix(Toast): unreachable behind overlays

[sandros94]

🔗 Linked issue

Resolves #2646

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The fix is composed into two parts:

• prevent the default's of DialogContent if the overed element is a toaster
• make sure that the Toast is a valid css target for pointer events

no updates to the vitest's snapshots are required

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

pnpm add https://pkg.pr.new/@nuxt/ui@2650

commit: aed57e6

[benjamincanac]

It actually works but one thing I don't understand is there is no data-sonner-toaster in the DOM 🤔

[sandros94]

It actually works but one thing I don't understand is there is no data-sonner-toaster in the DOM 🤔

Ikr? 🤣

But considering that radix-vue is a port of the react version, that bases its toaster on Sonner, there might be some pollution that works in our favor.

Once we migrate to Reka, and if things do change, we just update the search (even just a div > ol works, but it is kinda generic)

[benjamincanac]

@sandros94 I was testing to remove this code now that we migrated to Reka UI and it does seem to work anyway. Would you mind confirming that we can remove this safely?

[sandros94]

Let me double check

[sandros94]

@benjamincanac yes, I double confirm that the preventDefault is no longer needed. Opening PR

[benjamincanac]

Thanks for the confirmation, no need to open a PR I'm in the middle of refactoring this already. I'll rename prevent-close to dismissible to match Drawer component as well.

[benjamincanac]

We still have the issue with the Toasts when using a Drawer but this might be due to the fact that it's still using radix-vue instead of reka-ui.

[sandros94]

Thanks for the confirmation, no need to open a PR I'm in the middle of refactoring this already.

Ah great! It only needs pointer-events-auto in the toaster's theme

We still have the issue with the Toasts when using a Drawer but this might be due to the fact that it's still using radix-vue instead of reka-ui.

probably 🤔

[benjamincanac]

@sandros94 Check out:

• fdaff66
• 6fb426f

[sandros94]

@sandros94 Check out:

• fdaff66
• 6fb426f

Looks great 👌
Indeed the only issue I can reproduce is the drawer one