Dropdown won't close on item click

[thai-recurmetrics]

I am experiencing a problem with the dropdown menu, as it fails to close upon selecting an item from the dropdown list. To illustrate this issue, I have provided a video demonstration. The problem can also be reproduced on the demo site: https://www.flowbite-react.com/docs/components/dropdown. I have acquired the pro version and would appreciate assistance in finding a workaround for this issue. I attempted to create a reference and used the following code snippet: ref.current.querySelector('.menu').classList.add('hidden'), but unfortunately, it did not resolve the problem.

dropdown.mov

Definitely looking for a way to programmatically tell the dropdown to close.

[linpan]

when use prefix fb- Dropdown component not working by click

[borhansahed]

Will I try to fix it?

[fitrahmunir]

Hi, can I work on this?

After inspecting the component, there is no handler to handle targetElement to hide after click.

[linpan]

test on prefix: "tw-"

[fitrahmunir]

test on prefix: "tw-"

The dropdown didn't work if we try to use any prefix. It is because the show and hide method in dropdown only targetting block and hidden class which is tailwind's utility class. That's why if we use prefix fb- for example, the method cannot targetting fb-block and fb-hidden class.

[borhansahed]

Anyone fix it ?

[jonwaghorn]

This is a known issue, see #132 for updates

[leikoilja]

still not working...
unfortunately had to build a workaround messy component to cater for it.
note the use of references, state and the hey is to call again initDropdowns after the class is changed

import { forwardRef, useState, useEffect, useRef } from "react";
import { initDropdowns } from "flowbite";
import { ReactComponent as ChevronDownIcon } from "@components/icons/chevron-down.svg";

interface DropdownProps {
  textColor?: string;
  textHover?: string;
  textSize?: string;
  fontSize?: string;
  id?: string;
  options: { code: string; nativeName: string }[];
  onSelect?: (selectedOption: string) => void;
  initialValue?: string;
}

const Dropdown = forwardRef(
  (
    {
      options,
      onSelect,
      initialValue = options[0]?.code,
      id = "default",
    }: DropdownProps,
    _
  ) => {
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>();

    const onOptionSelect = (selectedOption: string) => {
      if (onSelect) {
        onSelect(selectedOption);
      }
      setIsOpen(false);
    };

    useEffect(() => {
      initDropdowns();
    }, []);

    useEffect(() => {
      if (dropdownRef.current && isOpen === false) {
        dropdownRef.current.className = dropdownRef.current.className.replace(
          "block",
          "hidden"
        );
        initDropdowns();
      }
    }, [isOpen]);

    return (
      <div>
        <button
          id={`buttondropdown${id}`}
          data-dropdown-toggle={`dropdownTarget${id}`}
          data-dropdown-placement="bottom"
          className={
            "bg-transparent focus:ring-0 flex items-center focus:outline-none text-center"
          }
          type="button"
          onClick={() => setIsOpen(!isOpen)}
        >
          {options.find((option) => option.code === initialValue)?.nativeName}
          <ChevronDownIcon className="ml-1 w-4" />
        </button>
        <div
          id={`dropdownTarget${id}`}
          className="hidden z-50 bg-white divide-y divide-gray-100 rounded-lg shadow w-44"
          ref={dropdownRef}
        >
          <ul className="py-2 text-sm text-gray-500">
            {options.map((option, index) => (
              <li key={`option_${index}`}>
                <span
                  onClick={() => onOptionSelect(option.code)}
                  className="block py-2 hover:bg-gray-100 cursor-pointer text-center"
                >
                  {option.nativeName}
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
);

export default Dropdown;

[r4cker]

still here in 2.5.1 (no js framework)

[boosh]

Found a workaround:

                dropdown.hide();
                dropdownEl.classList.add('hidden');
                initDropdowns();

Only seems to work with the click trigger (not hover).

E.g. with AlpineJS:

<button type="button" id="copyDropdownButton" data-dropdown-toggle="copyDropdown" data-dropdown-trigger="click" ...>

   <div id="copyDropdown" x-data="copyButtons">
        <a href="#" @click.prevent="closer">Close me</a>
  </div>

<script>
    document.addEventListener('alpine:init', () => {
        const dropdownEl = document.getElementById('copyDropdown');
        const triggerEl = document.getElementById('copyDropdownButton');
        const dropdown = new window.Dropdown(dropdownEl, triggerEl);

        Alpine.data('copyButtons', () => ({
            closer() {
                dropdown.hide();
                dropdownEl.classList.add('hidden');
                initDropdowns();
          })
    ...
</script>

It doesn't seem to work with the hover trigger, but now this closes on click

[r4cker]

there is a quick fix. When the click is triggered

const dropdown = FlowbiteInstances.getInstance("Dropdown","copyDropdown");
dropdown.hide();