quasar icon indicating copy to clipboard operation
quasar copied to clipboard

Notify plugin breaks virtual scroll

Open w0pp opened this issue 1 year ago • 3 comments

What happened?

When you include the Notify plugin in quasar.config.js, virtual scroll breaks. See the provided example where holding the scrollbar still makes the virtual scroll scroll to the bottom.

What did you expect to happen?

Virtual scroll behavior should not change when including the Notify plugin.

Reproduction URL

https://stackblitz.com/edit/quasarframework-cyj7tr?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

  1. Go to the provided reproduction link
  2. Click on the time zone q-select, so that the dropdown shows
  3. Move the scrollbar in q-select's dropdown menu down a bit, and hold it there
  4. Observe the virtual scroll scrolling by itself

Video: https://i.imgur.com/fDAxVJm.gif (notice how the cursor isn't moving but virtual scroll is)

If you remove Notify from plugins in quasar.config.js, the virtual scroll will then work correctly -- it won't scroll by itself.

Note: the StackBlitz example uses an older Quasar version, but the bug also happens in the latest version (v2.14.5).

Flavour

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

Areas

Plugins (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 18.18.2

Global packages
  NPM - 9.8.1
  yarn - 1.22.21
  @quasar/cli - 2.3.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.14.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.7.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.19 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.0
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.17 -- Native-ESM powered web dev build tool
  eslint - Not installed
  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*

Relevant log output

No response

Additional context

No response

w0pp avatar Feb 22 '24 11:02 w0pp

Tried to reproduce it on Chrome on MacOS but couldn't. Will try with Windows as well.

Meanwhile, I really fail to see any connection between Notify and the virtual scroll of a QSelect, but might be useful information for the real culprit.

rstoenescu avatar Feb 26 '24 13:02 rstoenescu

@rstoenescu Did you have any luck reproducing it on Windows? I just tried it on 2 different PCs in Chrome, the bug happened on both.

w0pp avatar Mar 19 '24 10:03 w0pp

Seems like the bug has something to do with q-notifications__list--center divs -- if I delete them, or make them not take up the entire page height, the bug disappears. I'd say this is a bug in virtual scroll, not in the Notify plugin, since the mentioned divs aren't anything special, just fullscreen divs with fixed position.

Here's a temporary workaround if you don't mind not being able to display centered notifications:

.q-notifications__list--center
  top: unset

w0pp avatar Mar 31 '24 19:03 w0pp