vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard
verified publisher icon vuetifyjs

[Bug Report][3.5.14] VTimePicker closes VMenu unexpected - unable to set time in 24hr format

Open KIDS-interactive opened this issue 1 year ago • 6 comments

Environment

Vuetify Version: 3.5.14 Last working version: 2.7.2 Vue Version: 3.4.21 Browsers: Chrome 123.0.0.0 OS: Windows 10

Steps to reproduce

Click on the input-field an click on a hour between 0-11

Expected Behavior

I expect the menu to stay open and the time to be selected

Actual Behavior

The menu closes and the hours are not selected

Reproduction Link

https://play.vuetifyjs.com/#...

KIDS-interactive avatar Apr 05 '24 12:04 KIDS-interactive

In the repo link, the menu is staying open and I can select hours and minutes. I'm on Windows 10, Chrome 123

blalan05 avatar Apr 05 '24 14:04 blalan05

Please have a look on this video. The error only occurs when clicking on hours 1-11. Maybe you tested with touch-events enabled?

https://github.com/vuetifyjs/vuetify/assets/75635412/64f67289-35a1-4cc8-94df-c61dda3d78e4

This occurs on multiple system. Windows 10 & 11

  • Chrome 123.0.6312.105
  • Edge 123.0.2420.81
  • Firefox 121.0 and 124.0.2

Google Pixel 7 Pro Android 14 Here it works to select the hour, but the confirm-behavior is different to Desktop. Desktop: Click on Minute and the model is updated Mobile: Click outside to update the model

https://github.com/vuetifyjs/vuetify/assets/75635412/b3cdeb2b-0aff-4baa-8f2e-5deaa8f9f09a

KIDS-interactive avatar Apr 08 '24 06:04 KIDS-interactive

Weird how inconsistent it is, for me it closes if I click on anything but 12-23. If you're handling closing the menu yourself it should have :close-on-content-click="false", but the time picker controls should also be preventing click propagation anyway.

Side note you probably want min-width="0" not width="auto"

KaelWD avatar Apr 08 '24 14:04 KaelWD

When will this bug be fixed? Why are bugs like this (component is unusable) not prioritized?

benwick avatar Sep 16 '24 09:09 benwick

This component is still in labs, so consider it "beta" release. And works perfectly fine when used correctly (docs include :close-on-content-click="false" while reproduction playground does not).

We can upgrade the example from docs to improve UX for those users that select hour and close the picker while expecting the time to update.

J-Sek avatar Nov 16 '24 01:11 J-Sek

I don't see anything to fix here, but we can keep it open until VTimeInput hits the labs.

J-Sek avatar Jun 14 '25 23:06 J-Sek