QSlider lazy mode cutom label's quirk

diviman commented 1 year ago

What happened?

When QSlider is used in "lazy" mode with a custom label there is some unexpected component behaviour. If you move the slider to the right-left, then when moving through the initial value, the label does not change. On the contrary, if you do not use customization but the 'lazy' mode still, the label changes its value as expeced.

What did you expect to happen?

The value of the label should be changed in the same way as if you'd moved through the starting value in the "lazy" mode without label customization.

Reproduction URL

https://codepen.io/diviman/pen/XWBgbPj

How to reproduce?

Follow the link provided.
Pay attention to the starting value "10 points" and the corresponding marker.
Move the slider to the left by one to the marker "9" and don't release the mouse button to prevent firing the @update event.
You will see the updated label "9 points". It seems Ok!
Move back to the marker "10" and still hold the button.
You should see that the value label does not change to "10 points" and still have the value "9 points".
Now keep moving the slider to value "11". You'll see that the label will be changed to "11 points". Now, it's Ok!
Then move back to "10" and you will see that the label has the previous meaning of "11 points".

Go to the QSlider component at the bottom and try to pass through p.1 to p.8 described above. You could see that the value of the label changes as expected.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), SPA Mode

Platforms/Browsers

Firefox, Chrome, Safari

Quasar info output

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 18.12.1

Global packages
  NPM - 9.1.1
  yarn - Not installed
  @quasar/cli - 1.4.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.11.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.6.2 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.45 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.28 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.20.7 -- Babel compiler core.
  webpack - 5.75.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.9.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - Mizar
  VMware Network Adapter VMnet1 - 192.168.145.1
  VMware Network Adapter VMnet8 - 192.168.19.1
  Local Network - 192.168.100.100

Relevant log output

No response

Additional context

No response

pdanpdan commented 1 year ago

Why this happens:

components emit update:model-value when their new internal value is different from the external value (:model-value)
you use an unmodified :model-value="lazy"
you update a temporary variable, so the lazy model stays the same
when you come back to the original value (10) no update event is emitted because the value is the external one

Solution:

use the temporary variable as model https://codepen.io/pdanpdan/pen/jOpwyPb?editors=1010

diviman commented 1 year ago

Hi Dan,

Thank you very much for your brilliant explanation!

I tried to reproduce your solution in my context with some changes aimed to fit this approach to my needs. I found a way how to redesign the logic using your advice. Now it works as was expected.

Sincerely, Olexiy Mudriy.

On Fri, Jan 13, 2023 at 10:48 AM Popescu Dan @.***> wrote:

Closed #15261 https://github.com/quasarframework/quasar/issues/15261 as completed.

— Reply to this email directly, view it on GitHub https://github.com/quasarframework/quasar/issues/15261#event-8218620390, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKQUA75OT24JK2ICV4W6OPTWSEJFBANCNFSM6AAAAAATZYWKY4 . You are receiving this because you authored the thread.Message ID: @.***>

quasarframework / quasar