Vuetify: [Bug Report] Opening v-menu with focus event on a text-field breaks click event

[Phennim]

Environment

Vuetify Version: 2.0.19
Vue Version: 2.6.10
Browsers: Firefox 69.0
OS: Mac OS 10.14

Steps to reproduce

• Open reproduction link
• Click on the input field

Expected Behavior

The menu with the datepicker shoud open

Actual Behavior

The menu flashes open and closes immediately

Reproduction Link

https://codepen.io/Phennim/pen/KKPYGRK

Other comments

I used the setTimeout workaround posted in https://github.com/vuetifyjs/vuetify/issues/4454
Which seems to work. Though I don't know how stable it is, since setting the timeout too low breaks it again

[mismith]

Any idea what's causing this @johnleider ?

[Lisible]

I can confirm this bug is still present in v2.2.19

[Lisible]

In my case, adding @mousedown.prevent on the v-text-field worked. However this workaround doesn't seem to work in the example posted above.

[tstar]

It's a pity, but this problem is still present in the latest version 2.3.8.

[kathar0s]

This is alternative solution.

use v-menu props "open-on-click: false" and "close-on-click: false"
and you just control v-menu model through v-text-field's blur and focus event.

https://codepen.io/kathar0s/pen/YzqyWbz

[tstar]

This is alternative solution.

Thanks for the solution, but it does not work with the date-picker, you cannot change the date, it seems to me that the menu closes before the date-picker selects a date. Without v-on:blur="pickDate = false" for the text-field it works but does not close the date-picker. I still can't get it to work :(

[bHacklv]

@tstar and the rest, I found a solution using @kathar0s approach.

You have to add timeout for blur:

private onBlur() {
      setTimeout(() => {
        this.pickDate = false;
      }, 100)
    }

must be 100ms+ delay or it stops working.
I've set mine to 500 just to be sure.