QTable: scrollTo not working alongside async data requests and loading prop

laura-tamm commented 2 years ago

What happened?

I want to scroll to a selected index in a QTable that has virtual-scroll and the loading indicator enabled.

When handling the scroll request, I set loading=true on the table and then call an async function. When it completes I attempt to scrollTo(index) and set loading=false. The table scrolls instead to a random index.

Scrolling to a selected index works as expected if the loading prop is removed.

What did you expect to happen?

The table scrolls to the selected index after the async call is complete and the loading prop on the table is set to false

Reproduction URL

https://codepen.io/lelapalooza/pen/wvypxZo

How to reproduce?

Go to the provided reproduction link
Click the button to scroll to a selected index (e.g. 100) using the input field
Observe the row index and see that it is not what was requested
Remove the loading prop from the table
Click the button to scroll to a different selected index (e.g. 1000) using the input field
Observe the row index and see that it is correct

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

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

Global packages
  NPM - 8.6.0
  yarn - 1.22.17
  @quasar/cli - 1.3.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.7.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.3 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.14.0 -- 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 - Not installed
  vuex - Not installed
  electron - 16.2.5 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - 15.5.1 -- Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
  electron-builder - Not installed
  @babel/core - 7.17.10 -- Babel compiler core.
  webpack - 5.72.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.8.1 -- 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.5.5 -- 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
  @quasar/quasar-app-extension-testing-unit-jest - 3.0.0-alpha.10 -- A Quasar App Extension for running Jest tests

Relevant log output

No response

Additional context

No response

pdanpdan commented 2 years ago

Not a solution but until we find the cause and the fix is available please scroll in a setTimeout https://codepen.io/pdanpdan/pen/XWZZKge?editors=0010

rstoenescu commented 2 years ago

Fix will be available in Quasar v2.7.2

quasarframework / quasar