How to avoid dropdown from closing when clicking inside the dropdown?

[mejaz]

Hi,

I am using tw-elements in one of my react projects. While using the dropdown component, I don't want the dropdown to close if the user clicks inside it. I saw in the dropdown API section that we can use data-te-autoclose='outside' for my scenario, but it doesn't seem to be working. The dropdown closes even if I click inside or outside the dropdown.

Below is my sample code:

export default function CustomDropDown() {
  return (
    <div className="flex md:order-2 hidden lg:block !z-[100]">
      <div className="relative" data-te-dropdown-ref data-te-autoclose="outside">
        <a
          className="hidden-arrow flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
          href="#"
          id="dd1"
          role="button"
          data-te-dropdown-toggle-ref
          aria-expanded="false">
          click-me
        </a>
        <div
          className="space-y-2 w-60 px-5 pb-5 absolute left-auto right-0 z-[1000] bg-gray-200 float-left m-0 mt-1 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block"
          aria-labelledby="dropdownMenuButton2"
          data-te-dropdown-menu-ref
        >
          <div
            className="mb-3 flex items-center justify-center border-b-2 border-solid border-gray-100 py-3 outline-none"
            data-te-dropdown-autoclose-ref="false hide">
            <span>Items</span>
          </div>
          <ul className={"max-h-72 overflow-auto"}>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

Any idea what I am doing wrong?
Thank you for your time!!

[smolenski-mikolaj]

@mejaz please add data-te-auto-close="outside" attribute to anchor element with data-te-dropdown-toggle-ref attr, like this:

<a
  className="hidden-arrow flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
  href="#"
  id="dd1"
  role="button"
  data-te-dropdown-toggle-ref
  data-te-auto-close="outside"
  aria-expanded="false"
>
  click-me
</a>