Skip to content

QSelect with options-dense, options-cover and #before-options slot : The menu jumps up when displayed first time #17749

Open
@xlaussel

Description

@xlaussel

What happened?

I have a QSelect with options-cover, options-dense and a #before-options slot.
When the menu is displayed for the first time it jumps some pixels: It is displayed then it moves, it looks like the position is calculated in 2 times.

Note that after the first display, if the menu is displayed again there is no problem: I is displayed immediatly at the right place. It looks like the position is calculated at the first display and then saved for after.

In the reproduction URL the menu moves up but in my more complicated case the menu also moves left.

If I remove the #before-options slot or the options-dense prop there is no problem.

What did you expect to happen?

The menu should been displayed at the right place immediatly.

Reproduction URL

https://jsfiddle.net/y3q267rd/10/

How to reproduce?

  1. Go to the reproduction link
  2. click on the QSelect
  3. Look at the menu jumping!
  4. The menu jumps only at the first display so press the yellow "Run" button at the top in order to reinitialize and click again on the QSelect to see the menu jumping again!

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions