Search code examples
javascriptalpine.js

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.

Live preview: https://codepen.io/fossil01/pen/XWRNqRz

<li class="relative hidden lg:block" x-data="{isProfileMenuOpen: false}">
  <button class="flex align-middle rounded-full focus:shadow-outline-purple focus:outline-none" @click="isProfileMenuOpen = !isProfileMenuOpen" aria-label="Account" aria-haspopup="true">
   
    <p class="text-black">Username</p>
  </button>
  <template x-if="isProfileMenuOpen" @click.away="isProfileMenuOpen = false}">
    <ul 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">
      <li class="flex">
        <a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="profile.html">
          <span class="iconify" data-icon="gg:profile" data-inline="false"></span>
          <span>&nbsp;My Profile</span>
        </a>
      </li>
      <li class="flex">
        <a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
          <span class="iconify" data-icon="ant-design:shopping-cart-outlined" data-inline="false"></span>
          <span>&nbsp;My Cart</span>
        </a>
      </li>
      <li class="flex">
        <a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="#">
          <span class="iconify" data-icon="ant-design:setting-filled" data-inline="false"></span>
          <span>&nbsp;Settings</span>
        </a>
      </li>
      <li class="flex">
        <a class="inline-flex items-center w-full px-2 py-1 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-800 dark:hover:text-gray-200" href="./pages/login.html">
          <span class="iconify" data-icon="cil:account-logout" data-inline="false"></span>
          <span>&nbsp;Log out</span>
        </a>
      </li>
    </ul>
  </template>
</li>
Solution

  • 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.outside="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>