VirtualScroll Qtable is scrolled one unit when using QMenu in "Body" Slot

[RamonDonadeu]

What happened?

I have a long QTable with virtual scroll enabled, and each row has some options set in a QMenu component inside "Body" Slot. So When on the top of the table, user click on right mouse button to open the menu, and then click on an option, the table rows are scrolled, 1 row unit, to the top, so the first row gets under the header of the table. I tested it, and the problem is the virtual-table option, without it the bug won't reproduce.

What did you expect to happen?

To not scroll automatically one row.

Reproduction URL

https://codepen.io/RamonDonadeu/pen/wvEYvZq?editors=111

How to reproduce?

1.- Go to providen link 2.- Make sure you are on the top of the table. 3.- Right click in any row of the table 4.- Then you can reproduce it with diferent actions: 4.1- Click on an option of the menu, in this case 'Test' 4.2- Left click again the same row 4.3- Right click in the same row.

Now the Table should have scrolled up one row. The issue is not reproduced if you right click to open the menu, and then click on any other row different than the clicked before. Or, if you are not at the top of the table.

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Chrome, Brave Safari

Not tested in Firefox but I suppose it will be te same

Quasar info output

Operating System - Darwin(22.3.0) - darwin/arm64
NodeJs - 18.12.1

Global packages
  NPM - 8.19.2
  yarn - 1.22.19
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.10.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.6 -- 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.26 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.28.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 - mac126.local
  en0 - 10.2.6.244

Relevant log output

No response

Additional context

No response

[pdanpdan]

Seems to be related to https://github.com/quasarframework/quasar/issues/14450, but this happens when the QTable gets focus. I'll take a look

[pdanpdan]

I'm not sure there is something automatic that can be done (looking into it)

But it can be fixed in CSS (add scroll-margin-top equal to the size of the sticky on top) The same should be true for sticky on left https://codepen.io/pdanpdan/pen/vYzVOBd

[RamonDonadeu]

Okay I'll do that. Thanks!

[pdanpdan]

Please keep this open until i can check if something automatic can be done

[dsl101]

I'm working on a QTable virtual scroll issue atm, and going through all the open tickets. Just to note, in case it's important, I only see this specific problem in Chrome (116) and not in Firefox (113), both on Windows.

[rdonadeu]

I work on Mac, And it also happens in Chrome and in Safari. Also recently I found out, that if table is bigger than window height, it scrolls one row up under the TH, and also the entire table is scrolled upwards too.

I had a similar problem only happening in safari where I had a dialog container hidden on the bottom of the page, and when using context menu inside table. Also scrolled the q-layout under q-header. Removing that dialog container solved the problem, but it was in "position: Absolute" So it should not be interpreted as it was using screen space. Even Inspecting the browser showed that the layout was not reaching the bottom of the page, and nothing was occupying that space.

[Clelsonrl]

Just to add my case, the scrolling also happens when using a Qmenu in the QTable header slot. Clicking on the menu content itself or its anchor element, only when the menu closes. Clicking outside does not trigger the srolling side-effect.

[timbze]

I assume the underlying issue is the same as #17081

Adding this css works as a work-around for #17081, and maybe here too?

tbody.q-virtual-scroll__content {
  scroll-margin-top: 100vh;
}