Problem /w nested portal components

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).

[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>

[rstoenescu]

Reopening for further assessment