I'm not able to make click.outside work

[faqndo97]

Description:

I'm trying alpine doing different components but I got stuck with the searchable select component.

Code here: https://codepen.io/faqndo97/pen/PoOWEKj?editors=1001

Problem:

In the ul element (<ul class="..." style="display: none" x-show="open" @click.outside="open = false">) I added the @click.outside="open = false" so when someone click outside of the list it will close automatically but this is not working and I couldn't figure out why. Am I doing something wrong?

Thanks for your help!

[faqndo97]

Update: I added the @click.away="open = false" on the second div, and now seems to be working fine, what's the difference between outside and away? Why one works and the other doesn't?

[SimoTod]

Click.outside doesn't exist in v2.

Your codepen uses Alpine v2 but the current version is v3. If you are still using v2, you need to follow the old documentation: https://github.com/alpinejs/alpine/blob/2.x/README.md