3

I've got a date-picker component in an app and used the example for a menu to open it.
I now want to make it more efficient to use for desktop users, so I removed the readonly flag to make manual input possible.
Now desktop users can simply tab through the different fields of the form to quickly input dates and times. The problem here was that the date-picker would not show up when a user tabs into a field, which was easily fixed with adding @focus="menuVariable=true" to the text-field.
But the problem now is that the date-picker won't show up anymore when a user first clicks into the text-field, at least not consistently, which I haven't been able to fix. I already tried to listen for click events and setting the menu's toggle to true then, but I guess the problem is setting that variable in the first place. Not sure how to work around this or how to open that menu manually any other way.

Here is a codepen showing off the problem. Click around a bit between the two fields, the date-picker on the right always opens, the one on the left only occasionally.

Does anyone know a better solution to consistently show the date-picker when a user either clicks into the text-field (or any other part of the v-menu) or tabs into the text-field?

CGundlach
  • 671
  • 4
  • 13

2 Answers2

1
@keyup="menuVariable=true"
@keydown="menuVariable=false"

I worked with this.

神達小楠
  • 11
  • 1
-1

there is a nice solution here:

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

v-on:focus="onFocus"
v-on:blur="onBlur"

Hope it helps you

Julio Acevedo
  • 1
  • Building on top of Julio's answer, I tried to integrate this proposed solution into the codepen shared in the original question. Here is the link. https://codepen.io/grane22/pen/bGNyjPX – grane2212 Jan 29 '20 at 20:15
  • Neither of these seem to do what I'm looking for (Date-picker shows when a user either clicks on the text field or tabs into it) :/ – CGundlach Jan 29 '20 at 23:12