@click.away not triggered when triggering another @click

[flore89]

Hi,
so I have a Megamenu toggle and a Search Modal toggle. They both have there own x-data and are not nested into each other.
Both elements close on @click.away. But if the Search Modal is open, and I click on the mega menu open trigger (@click). The search modal will no close, because the @click.away is not trigger when i click on the @click from the megamenu.

Is this behaviour a bug or is it intended? How would i go about solving it?

[SimoTod]

Click.away triggers when the click event bubbles up to window. It should work even if there are other click directives involved as long as you don't stop the event.

[ekwoka]

Do you have any @click.stop?

[flore89]

no, there is no @click.stop

I prepared a codepen so it is easier to explain: https://codepen.io/flore89/pen/WNgzZPK

1. Click the search input
2. Search modal will open, and it closes on @click.away
3. Then click on any Megamenu
4. Megamenu will open, but the search modal is still visible because the click somehow doesn't count as @click.away
5. The same problem is vice versa. If Mega is open and search gets opened, it will not trigger @click.away

I hope my problem is clearer now.

Thank you!

[ekwoka]

[ekwoka]

the a should be button btw

[flore89]

Damn, I'm sorry, was searching for @click.stop ... my bad! That did the trick. But now the megamenu doesn't work as intended.

Please see updated codepen: https://codepen.io/flore89/pen/WNgzZPK

When a megamenu is open, and I change to another one. It will not open anymore (on the first click). Guess that was why i had the x-on:click.stop

Do you have a solution where both behaviours are possible?

[ekwoka]

I would have the menus and menu buttons inside the same container with a @click.outside to close everything.