Problem /w nested portal components

[zenflow]

What happened?

Sorry for vague title. I have a more specific issue but I think it must be part of a more general issue (which I don't understand). I'll describe that more specific issue.

When using tooltips /w QRating in a QDialog in a QMenu item, the mousedown event from clicking one of the rating icons will cause the QMenu and QDialog to close.

No issue if the QRating component doesn't use tooltips. No issue if the rating-with-tooltips is inside just a QDialog, or inside a just QMenu item; it's the combination of both that creates the problem.

What did you expect to happen?

I expected that clicking one of the rating icons would just select that rating, and not affect the state of the QMenu and QDialog parent components.

Reproduction URL

https://codepen.io/zenflow/pen/mdXxZKQ

How to reproduce?

1. Go to the provided reproduction link
2. click "SHOW MENU" under "rating-with-tooltips in dialog in menu item"
3. click "show dialog"
4. mousedown on one of the rating icons
5. notice that the menu and dialog are closed immediately

Other elements on the page just demonstrate that there is no issue with the "rating-with-tooltips in dialog" and "rating-with-tooltips in menu item" scenarios You can also see that the issue is removed if you remove the use of tooltips in the RatingWithTooltips component template. You can also see that mousedown on the empty space around the QRating has no effect (as expected).

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

$ /code/node_modules/.bin/quasar info

Operating System - Linux(5.10.102.1-microsoft-standard-WSL2) - linux/x64
NodeJs - 16.15.0

Global packages
  NPM - 8.5.5
  yarn - 1.22.18
  @quasar/cli - 1.3.2
  @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.36 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.15
  pinia - Not installed
  vuex - 4.0.2 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.2 -- Babel compiler core.
  webpack - 5.72.1 -- 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 - 6.5.3 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  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-qmarkdown - 2.0.0-beta.7 -- Display inline markdown in your Quasar App

Networking
  Host - eb15a23a920f
  eth0 - 172.18.0.3

Relevant log output

No response

Additional context

• This wasn't an issue with Quasar v1, since I discovered this issue while upgrading to Quasar v2, and confirmed that it wasn't an issue with Quasar v1
• I chose Flavor: Quasar CLI with Webpack because I was forced to choose one of the options and this is what our app uses, but this issue applies equally to the other flavors, since it's an issue with Quasar components (I reproduced the issue with the UMD build)

What I found debugging

The event listener that fires for the mousedown event is here: https://github.com/quasarframework/quasar/blob/9e16a50c434ca52fb4316d217f8f915e2fdbe699/ui/src/utils/private/click-outside.js#L10 It seems to think that the mousedown event is from an "outside click" for the menu (which it is not).

[zenflow]

If anyone who understands the codebase could comment on where else in general to look out for this bug, it would be greatly appreciated, since we are currently in the middle of migrating to Quasar V2, and we sadly have some obstacles to thoroughly testing our application

[zenflow]

Update

This issue is definitely nothing specific to QRating. If you go to the reproduction and replace the RatingsWithTooltips component with this..

const RatingWithTooltips = { // this is actually "div with tooltip"
  template: `
          <q-card class="q-pa-md">
            <div style="border: 1px solid black; padding: 1em">
              <q-tooltip>tooltip</q-tooltip>
            </div>
          </q-card>
  `
}

... you can see the same issue: clicking the div in the dialog in the menu item causes the menu and dialog to close.

SO issue is confirmed with: q-menu -> q-dialog -> div (or probably anything) -> q-tooltip

---

I could NOT reproduce the issue with:

• q-menu -> q-menu -> div -> q-tooltip
• q-dialog -> q-dialog -> div -> q-tooltip

[rstoenescu]

Hi,

The correct way to do it is to extract QDialog from QMenu, otherwise the visibility state of QMenu influences the rendering (or lack of) for the inlined QDialog. QMenu/QTooltip/QDialog does NOT render its content when not "visibile"/"active" (for obivous perf reasons). When you click on the "show menu" QBtn the menu is rendered. You click on the QItem (so not outside of the menu) so it opens up the dialog and the menu is still "visible". As soon as you click on anything inside of the dialog the menu gets closed (you clicked outside of menu), so the dialog gets also destroyed. Should you put the dialog outside of the menu, you will have your desired behavior.

<div class="q-ma-md">
    <p>rating-with-tooltips in dialog in menu item</p>
    <q-btn label="show menu">
      <q-menu>
        <q-item clickable @click="dialogModel2 = true">
          <q-item-section>show dialog</q-item-section>
        </q-item>
      </q-menu>
      <!-- outside of QMenu: -->
      <q-dialog v-model="dialogModel2">
          <rating-with-tooltips></rating-with-tooltips>
        </q-dialog>
    </q-btn>
  </div>

[zenflow]

Thanks @rstoenescu so much for giving this attention!

I'm still pretty sure this is a bug.

As soon as you click on anything inside of the dialog the menu gets closed (you clicked outside of menu), so the dialog gets also destroyed.

That's incorrect. You can see in the reproduction that if you click the margin around the QRating (which is still inside the dialog) nothing happens to the menu or dialog (neither are closed or destroyed).

The menu and dialog are closed/destroyed only if the clicked element has a tooltip.

You can also test this by removing the tooltips from the RatingWithTooltips component.

Please reopen this issue.

Should you put the dialog outside of the menu, you will have your desired behavior.

This does work around the problem, but isn't really practical in our situation, since we are coming from Quasar v1 and already have menu items organized into separate components (each containing their respective dialog), and there's a hierarchy 2 levels deep.

Warning, rambling: Moving the dialogs completely outside the menus would (besides ruining the clean organization and separation of concerns), require us to communicate the open/close state of each dialog between the menu item containers and the parent component, either by drilling with tons of v-models or by using vuex.

Either way, it would be making things a lot more complicated and disorganized than it was with Quasar v1, so for a workaround we opted instead to replace the use of menus with dialogs, so we can keep the current organization and keep using tooltips in our dialogs. But the dialogs instead of [dropdown] menus are ugly.

Thank you so much!

[rstoenescu]

Reopening for further assessment

[mityaua]

Same issue. In my case: q-menu => parent div with q-list and q-dialog (same level) => inside q-dialog - q-select or another q-menu. So when I click outside q-select's dropdown or outside the inner q-menu - quasar closes q-dialog and main q-menu.

I can extract q-dialog outside q-menu but now click outside q-select closes only main q-menu. It is a partial solution to the problem. And the main problem still exists. We need a fix for it.

[NadineSarah]

Is there any update? I ran into a similar problem and I cannot put the q-dialog outside the q-menu.