Incorrect behavior of QMenu in Firefox when it or its root element has 'display flex' with 'flex-direction: column' set

[timarito]

What happened?

I noticed incorrect behavior on Mozilla Firefox Browser, when there is 'display flex' with 'flex-direction: column' set at root div or at component itself. It works in other browsers properly

q-menu div got appended to the body, but no positioning styles were applied

What did you expect to happen?

QMenu should appear when clicking the button in the Mozilla browser

Reproduction URL

https://codepen.io/timarito/pen/OJaGEqy

How to reproduce?

1. Click on "SHOW LIST 1", menu is not appeared
2. Click on "SHOW LIST 2", menu is not appeared

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[mrwomsk]

As a quick fix for my reusable component I use flex-direction: row with flex-wrap: wrap. But waiting for the resolving the issue

[kovalchukq]

This also applies to other browsers. On Chrome the menu now counts the max-height. Although the menu is styled with a max-height of 65vh by default.

Temp fix for this issues:

.q-menu {
	min-height: 1px;
	max-height: 65vh !important;
}

@rstoenescu

[gustavotoyota]

Just bumped into this issue.

The missing styles for me are: left, top, and visibility. Only on Firefox.

[Walnussbaer]

I can provide additional information (Firefox user here as well)

The bug occurred after Quasar 2.12.0, because with 2.12.0, the following still works:

<q-btn label="Hello">
  <q-menu>
    <div class="column">Hello</div>
  </q-menu>
</q-btn>

We just had to upgrade to 2.14.1 due to Storybook/ SASS and now, the above doesn't work anymore.

The above works fine in Chrome, but definetly not in Firefox (version 120.0.1)

[Walnussbaer]

As a quick fix for my reusable component I use flex-direction: row with flex-wrap: wrap. But waiting for the resolving the issue

this quickfix helped me as well, but this only works if your component is so small that it uses the wrap feature of flexbox. if your width can display all flex childs in a row, it will always do that

[tmcdos]

My solution is to patch Quasar (with the help of CustomPatch)

Index: \quasar\src\utils\private\position-engine.js
===================================================================
--- \quasar\src\utils\private\position-engine.js
+++ \quasar\src\utils\private\position-engine.js
@@ -117,8 +117,12 @@
 
   // some browsers report zero height or width because
   // we are trying too early to get these dimensions
   if (cfg.targetEl.offsetHeight === 0 || cfg.targetEl.offsetWidth === 0) {
+    if (retryNumber === 4)
+    {
+      Object.assign(cfg.targetEl.style, {visibility: 'visible'}) // workaround for Firefox
+    }
     setTimeout(() => {
       setPosition(cfg, retryNumber + 1)
     }, 10)
     return