How to close Dropdown when user click on one item?

[MiladDevarts]

hey Guys!
How to Close Drop Down When user click on one item

[fini]

If Using Method 1 from the docs (<details> tag):

Stays open until gets clicked again. Or you can close it using JS by removing the open attribute
Dropdown

[PabloGracia]

What if I want to have the behavior from Method 2 in which the dropdown closes when clicking outside and when an item inside the dropdown is selected?

[filipe-valente]

Bit of a hack-y solution, but having an invisible button like <button type="button" id="dropdown-close-helper" className="h-0 w-0" /> in the page and focusing it whenever I click an item, while preventing scroll, worked for me.

document.getElementById("dropdown-close-helper")?.focus({ preventScroll: true });

[czue]

I was able to get this working with Alpine by telling each item to explicitly remove the attribute. For some reason managing it with a state variable didn't work.

<details class="mx-2 dropdown dropdown-end" x-data="{}">
  <summary class="btn btn-ghost btn-sm" @click.outside="$el.parentElement.removeAttribute('open')">
    Open or Close
  </summary>
  <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
    <li><button @click="$el.parentElement.parentElement.removeAttribute('open');">Item 1</button></li>
    <li><button @click="$el.parentElement.parentElement.removeAttribute('open');">Item 2</button></li>
    <li><button @click="$el.parentElement.parentElement.removeAttribute('open');">Item 3</button></li>
  </ul>
</details>

[woss]

In svelte you can do it like this

<script lang="ts">
  let openDropdown: boolean = false
  
  function handleClickItem() {
    // close it
    openDropdown = false
  }
  
</script>

<details class="dropdown" bind:open="{openDropdown}">
  <summary class="m-1 btn">open or close</summary>
  <ul class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
    <li>
      <a on:click={handleClickItem}>Item 1</a>
    </li>
    <li>
      <a on:click={handleClickItem}>Item 2</a>
    </li>
  </ul>
</details>

[Joe-le-Tekkie]

This works, but in my case I am trying to use a dropdown lookup under an input field, in which case I can't use

Details

[Joe-le-Tekkie]

The solution for me was adding e.currentTarget.blur(); to the onclick

[ijash]

i use react ts

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { HiOutlineLanguage } from "react-icons/hi2";
import { LANGUAGES } from "../../common/constants";

export default function LanguageDropdown() {
  const { i18n } = useTranslation("global");
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    document.documentElement.lang = i18n.language;
  }, [i18n.language]);

  function changeLanguage(lang: string) {
    i18n.changeLanguage(lang);
    document.documentElement.lang = lang;
    // document.querySelector("#langSelector")? = false;
    setIsOpen(false);
  }
  const handleChangeLanguage = (
    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
  ) => {
    changeLanguage(e.currentTarget.dataset.value!);
    e.currentTarget.blur();
  };
  return (
    <div className="p-1 dropdown dropdown-bottom dropdown-end">
      <details id="langSelector" open={isOpen}>
        <summary className="btn btn-ghost btn-sm rounded-btn">
          <HiOutlineLanguage className="h-6 w-6" />
        </summary>
        <ul className="menu dropdown-content z-[1] bg-base-100 rounded-box w-52 p-2 shadow">
          {LANGUAGES.map((lang) => (
            <li key={lang.code}>
              <a data-value={lang.code} onClick={handleChangeLanguage}>
                {lang.label}
              </a>
            </li>
          ))}
        </ul>
      </details>
    </div>
  );
}

i have used open={isOpen}, but, when it's selected an item, it closes, but leaves the open attribute stays. is it a bug? it makes instant close on open a dropdown afterwards.

is this because of this issue? #3382

[peenyaa7]

Using method 3 (CSS Focus):

Based on this article, you could remove the focus calling blur() method:

export const MyDropdown = () => {

  const handleClick = () => {
    const element = document.activeElement;
    if (element && element instanceof HTMLElement) element.blur();
  };

  return (
    <div className="dropdown">
      <div tabIndex={0} role="button" className="btn m-1">Click</div>
      <ul tabIndex={0} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
        <li onClick={handleClick}><a>Item 1</a></li>
        <li onClick={handleClick}><a>Item 2</a></li>
      </ul>
    </div>
  )
}