Q-Menu not closing when clicked anywhere outside

[Kirschkern]

I have a q-menu element inside a button. When clicked, the menu opens but when clicked anywhere else outside the menu, it will not be closed again. It only closes when clicked on the button again or on one of the menuitems (q-item).

I’ve tried to place the menu at several places, but it doesn’t work anywhere.

Adding the persistent attribute and set it to false doesn’t change anything neither does auto-close.

What could be the reason?

Thanks for help

<q-btn label="Menu">
    <q-menu>
        <q-list class="text-no-wrap">
            <q-item
                clickable
                to="/editprofile">
                <q-item-section>Edit</q-item-section>
            </q-item>

            <q-separator />
                                    
            <q-item
                clickable
                @click="logout">
                <q-item-section>Logout</q-item-section>
            </q-item>
        </q-list>
    </q-menu>
</q-btn>

[s.molinari]

@Kirschkern - Can you make a codepen of your problem? Try making any parent divs larger than the QBtn.

I made this codepen, but also saw a similar issue: https://codepen.io/smolinari/pen/qBaxama

Then I gave the first div full view height. With that, the menu closes with a click anywhere on the screen.

Scott

[Kirschkern]

@s-molinari Thanks for your help and the pen.
I’ve found the cause but don’t know the real reason. I have a directive called “click-outside” which should just catch a click anywhere and hide the given element.

Vue.directive('click-outside', {
    
});

It seems like the name “click-outside” will cause this behaviour. It doesn’t even matter if the directive is finally empty.
See the updated pen:
https://codepen.io/daniel-kirsch/pen/YzGeVOB

Do you have an idea why “click-outside” might cause this behaviour?
My workaround so far will be to rename it.

[s.molinari]

@Kirschkern - QMenu also uses that directive. https://github.com/quasarframework/quasar/blob/938bfcce2c5bd8e5e09aea52d8410137de6a67d7/ui/src/components/menu/QMenu.js#L34

Scott

[Kirschkern]

@s-molinari Thanks a lot!