Why does the drop down close

[NickSmithTech]

I have a drop menu I've added an accordion inside of. This means the drop down needs to continue to be open unless clicked outside of. However, even when I add the autoClose option it still closes when I click in the menu.

You'll note that I've added the data attribute option data-te-autoClose="outside" in two places (and it doesn't work in only either place respectively) in the code example below:

<div class="relative" data-te-dropdown-ref data-te-dropdown-alignment="end">
	 <a class="hidden-arrow mr-4 flex items-center text-neutral-600 transition duration-200 hover:text-neutral-700 hover:ease-in-out focus:text-neutral-700 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 [&.active]:text-black/90 dark:[&.active]:text-neutral-400"
	   href="#" id="notifications_button" role="button"
	   data-te-dropdown-toggle-ref
	   data-te-dropdown-init
	   data-te-autoClose="outside"
	   aria-expanded="false">
		<span class="w-5"><i class="fa-regular fa-bell"></i></span>
	</a>
	<div class="w-[22rem] absolute z-[1000] m-0 hidden 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="notificationsButton" data-te-dropdown-menu-ref data-te-autoClose="outside">
		<!-- content goes here -->
	</div>
</div>

I also removed the content and replace it with just a div (isolating out the accordion element) and the incorrect close behavior still occurs.

What am I doing wrong here? Any help would be appreciated.

[juujisai]

Hi! Change data-te-autoClose="outside" to data-te-auto-close="outside". When using data attributes to add/change options, we have to use the kebab-case.

[NickSmithTech]

That worked.

Did I miss this in the documentation somehow? Reviewed the page and it is quite specifically camelCase.

[juujisai]

Those are the names of options that we use in JS. You can use them when initializing via JS, for example:

new Dropdown(dropdownContainer, { autoClose: true } )

When providing options via data attributes, they need to be changed to the kebab-case, because of how the JS is reading them.

[NickSmithTech]

Understood. I'm still trying to find where this is explained in the documentation—or is it a JavaScript convention I am unfamiliar with?

[juujisai]

We do not specify that. Using kebab-case for data attributes in HTML and camelCase in JavaScript ensures consistency and readability. Kebab-case is preferred in HTML and for its readability, while camelCase is a standard convention in JavaScript.

When JavaScript reads data attributes from HTML, it automatically converts them from kebab-case to camelCase.