Alpine: Click handler inside component triggers away method of parent

[mrmathewc]

Describe the bug
I have a responsive menu with a dropdown in the menu. When the browser is at a size that the mobile menu is triggered and a user has clicked on the mobile menu to show it, there is a link (about) that has the dropdown.

Both menus have away methods on their click handlers. However, when you click on dropdown inside the dropdown it triggers the parents away method despite being a child of it.

Describe what should be happening
When you click on the child dropdown the parent dropdown should remain open.

Demo
https://codepen.io/mrmathewc/pen/JjoevyK?editors=1001

Thoughts
Is the definition of the new component scope causing Alpine to think that the child element isn't actually a child element?

[SimoTod]

Hi @mrmathewc

in your example, you define the click.away callback on the button tag which doesn't contain the ul element so Alpine correctly handles the event.

If you move the click.away directive on the parent li element, it should work as you expect.

[calebporzio]

@SimoTod is right. Thanks @SimoTod

[mrmathewc]

Hi @SimoTod / @calebporzio,

Thanks for your suggestions.

I've moved the click.away directive to the parent div of the first button and moved the second away directive to the parent LI and that seems to have worked.

For anyone in the future, here's an updated Pen: https://codepen.io/mrmathewc/pen/JjoevyK?editors=1001

[calebporzio]

Thanks for following up!