Menu does not scroll with all parents

[jsormaz]

What happened?

if a menu has multiple scroll parents, the position of the menu only updates with the scrolling of the first parent.

This becomes especially apparent if a parent of the menu has the "scroll" class applied but does not actually have any scroll behavior.

Related to #15894, I believe this issue is a more general form and root cause of that issue

What did you expect to happen?

menu position should move with scroll of any scroll parent that contains the menu

Reproduction URL

https://codepen.io/Sormaz/pen/poqXEoz

How to reproduce?

1. Go to the reproduction link
2. Expand a select
3. Scroll the table, scrolls as expected
4. Scroll the outer scroll
5. Menu position does not move with select

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[jsormaz]

FWIW, i'm currently getting around this by attaching the following event listener to my top most scroll component:

function onScroll() {
  const els = document.getElementsByClassName('scroll')
  for (const el of els) {
    el.dispatchEvent(new Event('scroll'));
  }
}

[furches-cadre5]

function onScroll() { const els = document.getElementsByClassName('scroll') for (const el of els) { el.dispatchEvent(new Event('scroll')); } }

I've been having the same issue. Can you elaborate on how/when you are calling this function? Edit: I see now. I added it to the outermost div and called it 'onMounted'. Thank you @jsormaz for this!