x-if, templates and click.outside

[naasking]

I just ran into this issue and it seems to be a consistent stumbling block of combining x-if and click.outside, like with a modal dialog:

1. @click.outside listener on an undisplayed element responds to click that displays the element #1893
2. In 3.10.2 x-if and @click.away behave differently than 2.3.0 #2877
3. Click handler with .outside modifier should not be registered if the element is not shown with x-if #3642
4. @click.outside problem if you're using classes instead of x-show #2264

See the attached files for a test case:
alpine.zip

show.html demonstrates how it works as expected using x-show, template.html demonstrates that it does not do what's expected using x-if. These should both behave basically the same, it's very surprising that they don't, and this worked correctly in Alpine 2.x. What happens in template.html is that the click toggles 'open' to true, but then click.outside on the template content immediately triggers and sets it back to false even though no additional click occurred.

The advice in the posts I linked above suggest using click.stop to stop the event propagation. While this works for a single instance, this does not work for all cases, like if you have two drop down menus and clicking menu1 should hide menu2 and vice versa (Windmill based on Alpine 2.x features this pattern for the profile and notifications menus at the top-right: https://windmill-dashboard.vercel.app/).

The real problem is that the newly inserted content from the template should not be receiving events that were raised before the content even existed. That just doesn't make sense and I think that should be considered a bug.

[SimoTod]

Please do not post zip file, nobody is going to download them since they could contain malwares.
As i mentioned in another post a while ago, I don't think x-if has ever been compatible with click.away (it probably should).

[naasking]

I tried uploading .html files but those aren't allowed, so should I create a codepen or something?

Maybe it was only compatible by accident, but in Alpine 2 x-if was reliable enough with click.away as I used it quite a bit via the Windmill template I mentioned. Nevertheless I think the point I raised is valid: it makes little sense to propagate an event to DOM elements that didn't exist when the event was raised. DOM element insertions should happen on the "next tick" after the event has propagated.

[SimoTod]

Yeah, in v2 it used to work out of the box but in v3 it never worked. What happens there is that x-if gets inserted (and the listener registered) before the click event reaches the top of the document.
As a workaround, I think you can set the boolean on nextick from your code to make sure it happens after the click has propagated.

[naasking]

Using nextTick in the click handler is a good suggestion, thanks, this works as expected. Alpine should be inserting DOM nodes on the nextTick IMO, which would make the behaviour consistent with x-show.

[ekwoka]

x-show technically has it there already, and then specifically has some checks to ensure it happens differently.

It might be possible to just defer adding the outside listeners for one frame.