Vuetify: [Bug Report] Releasing mouse button outside a dialog should not close the dialog

[gsjen]

Versions and Environment

Vuetify: 1.5.11
Vue: 2.6.10
Browsers: Chrome 73.0.3683.86
OS: Windows 10

Steps to reproduce

1. Open the dialog
2. Left-click on the dialog
3. Without releasing the button, move the cursor outside the dialog
4. Release the button

Expected Behavior

The dialog should remain open. The dialog should only be closed if the mouse button is both pressed and released outside the dialog.

Actual Behavior

The dialog is closed.

Reproduction Link

https://codepen.io/gjen_123/pen/ZZKMLb

[blalan05]

The click handler here is on the v-app element, which is receiving both the up and down events. Lots of refactoring would be needed I think.

[lebesnec]

This make selecting text from a text field with the mouse inside a dialog near impossible, as you can try here: https://codepen.io/anon/pen/QPRBJz?editors=1010

Since the text field is near the edge, your cursor will naturally fall outside the dialog when you try to select text, and this will cause the dialog to close.

[Xambey]

This problem is observed on my version 1.5.16, can this be somehow temporarily solved?

[diazemiliano-zz]

@gsjen @blalan05 This has a workaround https://codepen.io/diazemiliano/pen/MNvEwb
Basically if you set the v-dialog as persistent and you have a @mousedown handler for the dialog content you can do some logic to achieve what you want.

[akeyboardlife]

@gsjen @blalan05 This has a workaround https://codepen.io/diazemiliano/pen/MNvEwb
Basically if you set the v-dialog as persistent and you have a @mousedown handler for the dialog content you can do some logic to achieve what you want.

I add a @mouseup event listener to avoid an additional mouse click outside of the dialog when closing the dialog.

Also, the v-select within v-dialog must set to attach to avoid unintended click:outside event firing.

A codepen

[darren-outdev]

Bringing this up as it remains an issue