click.stop and nested click.outside not working - modals and menus

[sdiack]

I'm encountering a strange issue - not sure it's a bug or not.

When using x-trap and click.stop to create a modal, any click.outside helpers don't appear to work within the scope of click.stop and therefore within the modal.

    <div x-data="{ modal_open: false }">
        <button x-on:click="modal_open = !modal_open">Open Modal</button>
        <div x-show="modal_open" x-on:click.stop x-trap="modal_open">
            <div>
                <div>Some other modal content for clicking on - i.e. to close the menu</div>
                <div x-data="{ openmenu: false }">
                    <div x-on:click="openmenu = !openmenu">Open Menu</div>
                    <div x-show="openmenu" x-on:click.outside="openmenu = false">Menu content</div>
                </div>
            </div>
        </div>
    </div>

After opening the menu, clicking on 'some other modal content' doesn't trigger click.outside. However, clicking outside the scope of click.stop does trigger click.outside. Is click.stop incompatible with a nested click.outside?

I've even tried this using the Alpine Components - placing the dropdown component into the content area of the modal component and the same problem is encountered - you can't close the dropdown by clicking elsewhere in the modal.

I've put this simple example in codepen if that helps illustrate better.

https://codepen.io/stuartdiack/pen/XWVpGpG

Apologies if this is not a bug and instead is expected behaviour, but knowing that would help me look for another approach to have menus within modals.

Thanks

[SimoTod]

Ye, they are incompatible. The outside modifier creates a listener on document (top element of your page, when the even reaches that point, Alpine checks who generate the event). The stops modifier prevent an event from bubbling up the dom.

[sdiack]

Thanks @SimoTod - this makes perfect sense now and gave me enough to go on to develop an effective work around.

Essentially, rather than store menu open/close state locally on each menu component, I moved this over to a global state store declared within the modal component, which contained the name of the open menu, or false if nothing is open. If this global state isn't false, I show an opacity-0 layer across the modal area below the menu. This layer has a click handler that sets the global state to false again, thus creating much the same effect of clicking outside the menu to close it, but still preserving the modal functionality.

Perhaps not the most elegant solution (!), but seems to work okay in this very limited case.