Alpinejs @Click. Away Does Not Hide/Remove the Element
I Am New to Alpine, and I Am Wondering Why My @Click. Away Does Not Work. It Should Hide/Remove the Dropdown from the Page. 1 Answer the Event Listener Should...
I am new to Alpine, and I am wondering why my @click.away does not work. It should hide/remove the dropdown from the page.
1 Answer
The event listener should not be registered to the HTML template tag as it's not a valid event target.
Add it to the ul tag instead.
<ul
@click.away="isProfileMenuOpen = false"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="absolute right-0 w-48 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700"
aria-label="submenu"
>
<!-- ... -->
</ul>
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
