How to filter out mouse click release events?

Question

I have a Vue/Vuetify Dialog which closes on a click outside of the dialog (as expected)

Problem: Inside that dialog, i have a text field. If i now select the content, and (by accident) release the mouse outside of the dialog, it closes. I imagine hundreds of users are going to have this problem

here's a little gif showing the problem: https://gifyu.com/image/64XB

i wrote a handler for click:outside and logged the event, and it's:

altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 398
clientY: 358
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: true
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 292
layerY: 4
metaKey: false
movementX: 0
movementY: 0
offsetX: 292
offsetY: 4
pageX: 398
pageY: 358
path: (19) [label.v-label.theme--light, div.v-input__slot, div.v-input__control, div.v-input.v-input--is-label-active.v-input--is-dirty.theme--light.v-input--selection-controls.v-i…, div.card-content.grid-x, div.v-card.v-card--flat.v-sheet.theme--light, div.no-padding-horizontal.col-sm-12.col-md-12.col-lg-12.col-xl-12.col, div.row, div.col, div.row.page-content, div.container, div.v-content__wrap, main.v-content, div.v-application--wrap, div#app.v-application.v-application--is-ltr.theme--light.page-xl.section-exchange, body, html.sr, document, Window]
relatedTarget: null
returnValue: false
screenX: 398
screenY: 430
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: label.v-label.theme--light
target: label.v-label.theme--light
timeStamp: 181260.08999999613
toElement: label.v-label.theme--light
type: "click"
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 1
x: 398
y: 358
__proto__: MouseEvent

in other words, it's a "click" event. of course i want it to close on real, actual clicks. but i don't want it to close on mouse release

is there a way to detect this particular event?

Thanks for any help :)

possible, i don't know. like i said, it's registered as "click" — devman, Oct 05 '20 at 15:51
https://stackoverflow.com/questions/14805225/whats-the-difference-between-mouseup-and-click-events may help. — evolutionxbox, Oct 05 '20 at 15:52
@TKoL good idea! but it doesn't seem to work. i changed `@click:outside` to `@mousedown:outside`, but it's the same behavior. maybe it's something intrinsic to vuetify? — devman, Oct 05 '20 at 15:54

Ohgodwhy · Accepted Answer · 2020-10-05T17:11:02.413

You can achieve this functionality by handling the mouseenter, mousedown and mouseup events within the container you're using (likely v-card?) in your <v-dialog:

Define the noClickAnimation property so you can keep a reactive reference.

Bind the mouse events to the container element:

<v-card ... 
  @mouseenter="noClickAnimation = false" 
  @mousedown="noClickAnimation = true" 
  @mouseup="noClickAnimation = false"

Add the :persistent="noClickAnimation" to your dialog.

Now when you mouse down, drag outside, and release, it won't close. The @mouseenter resets everything so they can appropriately close it as they would normally by clicking outside.

Here is a codepen.io that illustrates this behavior.

How to filter out mouse click release events?

1 Answers1