Greater control over what triggers the Dialog 'close' event

[dospunk]

The Problem:

I am using the Dialog component as well as notiwind, which is a notification system for Vue. If I have a notification pop up from notiwind while a Dialog is open and the user clicks on it, it closes the Dialog. I've tracked down the issue to this line of code which adds a listener to the window that triggers the close event on any click outside the Dialog. I've tried making the notification capture the click event and stop propagation to keep it from reaching the listener, but with no luck. With no information about what triggered the "close" event being passed, the only fix I've been able to find is to make the DialogOverlay handle closing the Dialog when it is clicked. This works fine for clicks, but forces me to implement the "esc" keypress event myself as well.

Possible Solutions:

1. Give us some control over which events trigger the "close" event
   One way this could be achieved is with some optional props that enable/disable the individual event listeners

   <Dialog :close-on-outside-click="false" :close-on-esc="true" />

   where the closeOnOutsideClick and closeOnEsc props both default to true

2. Pass some information about how the dialog was closed through the "close" event
   Currently the "close" event just passes true or false representing the new open state. If we were given some information about how it was triggered, we could account for that in our listener

   <Dialog @close="(openState, triggeringEvent) => {
     if( triggeringEvent.type === 'click' ) {
       //do something to check the target and decide whether to close
     } else {
       //triggering event is a keydown and so we can close
     }
   }" />

   If you don't want to include the entire Event object in the emitted event, even just the type of event that triggered the close would be better than nothing.

[agcty]

@RobinMalfait a lot of people seem to be having similar thoughts on this issue, seeing a ton of discussions being created around the same problem:

#1157
#705
#810
#691
#620
#621
#768

I understand you are probably swamped with other stuff to think about but this issue could be easily solvable with a flag or by providing the event. As outlined in #621 you could use a noop for the close function but that is very hacky IMO and disables esc behavior and could just be a lot easier.

[agcty]

Thank you, much appreciated!

[dospunk]

Love to hear it!

[aquaticone]

Has there been any update on this?

[agcty]

@RobinMalfait Has there been any update on this? Can do a PR as well but it's hard to know what you want the solution to look like.

[agcty]

@RobinMalfait just saw this PR #1268 and left a comment there.