[info] Working with QBtn and QMenu

[GordonBlahut]

I posted in this discord but was recommended to start an issue here so it doesn't get lost.

If you want to have a QOverlay behind a QMenu that's a direct child of a QBtn, rather than wrapping the QOverlay around QMenu, keep it separate, and update the QOverlay's model from the QMenu's events.

Put the QOverlay outside of the QBtn (do not wrap it around QMenu).

<q-overlay v-model="overlay" z-index="5000">
    <template v-slot:body>
        <div class="fullscreen row justify-center items-center">
        </div>
    </template>
</q-overlay>

And use before-show and before-hide on the QMenu to set the QOverlay's model:

<q-btn
    icon="add"
    fab
> 
    <q-menu
       @before-show="overlay = true"
       @before-hide="overlay = false"
    >
        // ...
    </q-menu>
</q-btn>

That way the QMenu can remain a direct child of QBtn.