search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.96k stars 3.52k forks source link

Blur event for QInput with QPopupProxy behaves different in Quasar v2 vs. Quasar v1 #13474

Open 54mu3l opened 2 years ago

54mu3l commented 2 years ago

What happened?

I'm using a QPopupProxy within a QInput (with QDate and QTime for a date/time input).

And every time a user makes a selection/click within the QDate/QTime the parent QInput emits a blur event.

This behavior didn't exist with Quasar v1. I couldn't find anything in the upgrade guide (https://quasar.dev/start/upgrade-guide#quasar-components) therefore I believe this isn't a desired behavior (=bug).

I created two codepen which clearly show the different behavior:

Quasar v1 https://codepen.io/54mu3l/pen/rNJmEPO

Quasar v2 https://codepen.io/54mu3l/pen/XWZRLoX

What did you expect to happen?

When the users selects a date/time within the QDate/QTIme the QInput should not emit a blur event.

Reproduction URL

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

How to reproduce?

  1. Open Codepen "Quasar v1" https://codepen.io/54mu3l/pen/rNJmEPO
  2. Click on the date icon
  3. Notice how no notify("blur") is shown
  4. QDate should now be open
  5. Select any date you'd like
  6. Notice how no notify("blur") is shown
  7. QTime should now be open
  8. Select any hour you'd like
  9. Notice how no notify("blur") is shown
  10. Notice how no notify("timeInput") is shown
  11. Select any minute you'd like
  12. Notice how notify("blur") is shown
  13. Open Codepen "Quasar v2" https://codepen.io/54mu3l/pen/XWZRLoX
  14. Click on the date icon
  15. Notice how notify("blur") is shown
  16. QDate should now be open
  17. Select any date you'd like
  18. Notice how notify("blur") is shown
  19. QTime should now be open
  20. Select any hour you'd like
  21. Notice how notify("blur") is shown
  22. Notice how notify("timeInput") is shown
  23. Since "timeInput" was emitted => QTime closes and you're not able to select any minute
  24. ...

==> Steps 3, 6, 9, 10, 11, 12, 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

54mu3l commented 2 years ago

While playing around with the provided Codepen above I just noticed another bug: QTime emits @update:model-value after hour is selected (no chance to select minutes)

Can be reproduced with the same Codepen provided above (https://codepen.io/54mu3l/pen/XWZRLoX). Maybe it's the same bug. If it's a different bug, just let me know and I can create another issue. Maybe it has something to do with this "enhancement" mentioned here https://github.com/quasarframework/quasar/issues/6306#issuecomment-961814467 ?

Thank you!

pdanpdan commented 2 years ago

Please split this in at least 3

54mu3l commented 2 years ago
  • leave this for blur

done

  • create one for Qv1 inconsistent behavior of QTime emit (does not emit on change as Qv2 does)

done => https://github.com/quasarframework/quasar/issues/13562

  • create one for missing emit reason in payload (as it is present in QDate) in both Qv1 and Qv2

Not 100% sure what you mean.

  • also it looks like Qv2 does not emit @change on final change

Not 100% sure what you mean.