Inconsistent behavior of QTime emit

54mu3l commented 2 years ago

What happened?

QTime behaves differently in Quasar v1 versus Quasar v2:

Quasar v1: @input emits after minutes are changed

Quasar v2: @update:model-value emits after hours is changed and after minutes are changed

I found this inconsistent behavior since I close the dialog with this.$refs.timeProxy.hide(); on emit. Since I upgraded to Quasar v2 users are no longer able to choose minutes (dialog gets closed after hours, because QTime already emitted)

What did you expect to happen?

I would expect QTime in Quasar v2 to behave like QTime in Quasar v1.

=> I would expect QTime to emit only after minutes are changed.

Reproduction URL

https://codepen.io/54mu3l/pen/oNEEzKL

How to reproduce?

Open Codepen "Quasar v1" https://codepen.io/54mu3l/pen/oNEEzOx
Click the clock icon
Choose a different hour
No emit notify "timeInput" is shown
Choose different minutes
Emit notfiy "timeInput" is shown

Open Codepen "Quasar v2" https://codepen.io/54mu3l/pen/oNEEzKL
Click the clock icon
Choose a different hour
Emit notfiy "timeInput" is shown and dialog closes
Not possible to choose minutes (since dialog is already closed)
...

==> Steps 4-6 are different in Quasar v2 versus Quasar v1

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(20.6.0) - darwin/x64
NodeJs - 16.15.0

Global packages
  NPM - 8.9.0
  yarn - 1.22.18
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.6.6 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.0.0-beta.14 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.13.6 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.33 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.15
  pinia - 2.0.14 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.1 -- Native-ESM powered web dev build tool
  eslint - 8.14.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - ************
  en0 - 192.168.1.28

Relevant log output

No response

Additional context

No response

rstoenescu commented 2 years ago

Hi,

This new behavior is on purpose because it was highly requested -- for example if user just wants to pick a different hour (and not go again to picking the minutes and seconds but maintain them).

As a result, the model is emitted when picking any subcomponent of time (hour, minute, second). The recommended way to go about this (the designed way) is to use the buttons slot like here: https://quasar.dev/vue-components/time#example--with-additional-buttons It will produce a deterministic behavior for your users.

54mu3l commented 2 years ago

Hi,

Thank you for your answer. Probably would've been nice to find a hint in the migration guide. ;)

quasarframework / quasar