Provide uniform/standard/documented way of accessing the outer/inner elements of QDialog/QMenu/QTooltip

What happened?

I have a custom component that wraps QMenu, e.g.:

<template>
  <q-menu ref="menuRef" @show="onShow">
    ... content ...
  </q-menu>
</template>

<script setup>
const menuRef = ref(null)
function onShow () {
  console.log('onShow', menuRef.value.$el)
}
</script>

The problem is - upon showing the menu, the menuRef.value.$el is resolved to #text and not to the actual menu element - please see the codepen below.

What did you expect to happen?

As explained in this thread - https://github.com/quasarframework/quasar/issues/13628 - refs are resolved after @show() - and indeed, I have a QDialog which works OK, but it seems this is not working for QMenu.

Reproduction URL

https://codepen.io/ddenev/pen/BaVaQLx

How to reproduce?

1. Go to the repro link
2. Click on the button
3. Check the console output - it shows that menuRef.value.$el is text and not the menu element

Flavour

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

Areas

Components (quasar), SPA Mode

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[rstoenescu]

Do not use internal variables. It will work until it won’t. Will provide a uniform way of accessing the actual content for all portal-based components.

[pdanpdan]

It’s not a bug, just a different way the components are created/used. I’ll reopen this, but please change the title to something like Provide uniform/standard/documented way of accessing the outer/inner elements of QDialog/QMenu/QTooltip