fix(dialog): fix scrollbar pointer-down click prevent dialog closing

[romanhrynevych]

this PR closes #624

[romanhrynevych]

This PR don't fix Toast issue, will try to fix this a little bit later 🙂

[zernonia]

Thanks for the PR @romanhrynevych . we can prevent dismissing the dialog when clicking on the Toast. So we dont need explicit fix for this.

Your fixes for clicking on scrollbar looks good to me 😁

[romanhrynevych]

@zernonia thank you for your great job on this package ❤️

How can we prevent closing Dialog by dismissing it? I added video asset to clarify bug that I'm cannot fix for now)

[zernonia]

@zernonia thank you for your great job on this package ❤️

How can we prevent closing Dialog by dismissing it? I added video asset to clarify bug that I'm cannot fix for now)

@romanhrynevych We can prevent default following this comment here.

The above shows Toast component, but it's technically the same for sonner component

[romanhrynevych]

Think that it will be helpful to point this inside docs, so I add some demo for this type of usage, maybe this will clarify things for more devs 🙂

dialog-toast-demo.mp4

@sadeghbarati hi 👋 What you think about this?)

[sadeghbarati]

Great Job @romanhrynevych ❤️

[romanhrynevych]

I just noticed one more issue, need to resolve it too.

So, when I add Toast component, because of it position in DOM (on top of our Dialog) we never will click on toast because DialogOverlay overlaps it, did you know how to Teleport Toast to the end of body? I search inside vue docs, but nothing 😞

dialog-toast-z-index.mp4

Also, I don't see any need to @interact-outside call on DialogContent, because it will never called when clicking on another elements 🤔

[romanhrynevych]

Previously I was teleporting to html but it places Toast after </body>, don't think that it is like it should work 😂

[zernonia]

Thanks @romanhrynevych ! After setting pointer-events-auto to <ToastViewport>, we can click on the Toast without closing the Dialog. I will revert the changes to use sonner as I believe other dev could be using other Toast package, and it demonstrates a good example of @interactOutside!

[zernonia]

Thanks for the PR @romanhrynevych ! Well done! 💚