Vuetify: [Bug Report] Timepicker closes after hours selection if value is preset

[blalan]

Versions and Environment

Vuetify: 1.4.0-beta.0
Last working version: 1.3.15
Vue: 2.5.21
Browsers: Chrome 71.0.3578.98
OS: Windows 7

Steps to reproduce

Open picker menu, select hour

Expected Behavior

Be able to select minutes

Actual Behavior

Menu closes

Reproduction Link

https://codepen.io/anon/pen/MZJGLo?&editable=true&editors=101

[jacekkarczmarczyk]

https://github.com/vuetifyjs/vuetify/pull/5680

[blalan]

So I upgraded to 1.4 and tested this first thing. I can now get to minutes again... however... the ux, still isn't the same as it was in 1.3. I understand progress, so if the changes made improved other areas of the timepicker then perhaps we can now look at improving things for my use case.

So here's my problem: I'm on mounting the timepicker, I'm setting an initial value (current time). Now the user can change it if needed. He opens up the menu, and selects the hour (24hour format), but the picker then closes, since the minutes are already set from the initial value. The user then has to open the menu again, and can then select the correct minute.

I tried watching the menu v-model and setting the time to null, but that is really confusing, since it just had a value and now it's blank... and this is a change from the 1.3 version.

So, I guess the question is, since the 1.4 update, what's the reccomended approach for setting an initial value in timepicker...

This maybe a question more suited for the Discord server so I can ask instead if you would like.

[jacekkarczmarczyk]

I will have to look one more time at #5680, maybe it could be fixed without introducing this bug

[Bbansjkl]

If I read the current code and the old code from before #5680 correctly, the fix should be making sure that a change event is only emitted if seconds are enabled and have most recently been set, or if seconds are not enabled and minutes have most recently been set.

Although that's assuming that it's actually the change event closing the menu by calling the $refs.menu.save in the default example - haven't tested that yet, and the documentation on the Timepicker and the Menu component don't say anything about that line.

[riemervdzee]

I'm currently experiencing the same issue (and created a duplicate issue, whoops).
My only input is that change is indeed emitted after selecting just a new hour

[vollyimnetz]

I also stumble about the problem: the current behaviour is:

IF no time is initialy set THEN do change after a full selection of hour, minute, second ELSE do change after every select of any type

This is fine, as long as the user know, he can select from the title which type (hour, minute, second) he want to change.

Possible Solution: Would be great if developers can control when the change-event is emitted OR have multiple events to listen to (emit after hour-/minute-/seconds-selection) OR have one event with a parameter provided to determine what has been clicked.

[Bbansjkl]

@vollyimnetz: The behavior in the linked pull request will resolve the issue in the OP, as far as I can see, since then change will only be emitted after the lowest value has been entered. As far as I know this is the correct approach, since change is supposed to be emitted when a user is done with their input.
I think the event you're looking for is input, it's supposed to be emitted after every input of a user, and the timepicker actually emits an input event whenever the user selects any of the three time segments.

[vollyimnetz]

@Bbansjkl : was wondering about the input event. Thank you for helping me out.

[ag84ark]

This is a great fix, but now the problem is, that when you select the same minute as original value, the dialog/menu does not close, only if you select a different value for minutes (no seconds used).
Can be tested on the timepicker components in the menu demo.

[jacekkarczmarczyk]

@ag84ark https://github.com/vuetifyjs/vuetify/issues/6163