Closing dropdowns on click

[msimkunas]

Is it possible to close/collapse the dropdown when the user clicks on one of its items without using the Javascript API?

Dropdowns already collapse when clicking outside them. Would it be possible to configure the dropdown widget via data attributes to toggle collapsing the dropdown when clicking on its items?

[FerchoCarcho]

How to do that? close the dropdown menu when one of the items is being clicked, a onClick event using vuejs?

[zoltanszogyenyi]

Hey peeps,

Not currently possible using only the data attributes, I'll have to build a dropdown-autoclose option.

You can do this with the JavaScript API though using the function callbacks.

ETA couple of weeks!

Cheers,
Zoltan

[FerchoCarcho]

Can you show me please how to close the Dropdown When a Link inside is clicked? because when clicking on a router-link link inside the dropdown doesnt close it, because it is a SPA. Please tell me how to do it with an example

[Zephni]

Does anyone know if there has been any progress on this? I am also making an SPA in Svelte, and would like the dropdown to close when clicking a button in the dropdown nav.

If not, is there anyway to send the correct event or call some sort of function to close it, I can just make that happen in the click handler if need be.

[jamilbk]

This works for me with NextJS 13:

import Link from "next/link";
import { Dropdown } from "flowbite";

export default function MyComponent() {
  let dropdown: any = null;

  useEffect(() => {
    if (!dropdown) {
      dropdown = new Dropdown(
        document.getElementById("dropdown-menu"),
        document.getElementById("dropdown-button")
      );
    }
  }, []);

  const hideDropdown = () => {
    if (!dropdown) {
      dropdown = new Dropdown(
        document.getElementById("product-dropdown-menu"),
        document.getElementById("product-dropdown-link")
      );
    }
    dropdown.hide()
  };

  return (
    <button id="dropdown-button">Dropdown</button>
    <div id="downdown-menu" className="hidden w-44 z-10">
      <ul>
        <li><Link onClick={hideDropdown} href="/link/to/another/spa/page"></li>
      </ul>
    </div>
  );
};

[DavithkbY]

Any news? Can you add a data attribute like there is for closing modals(data-modal-hide)? For example data-dropdown-close.

[manan-desai]

Try with this It worked for me

const buttonRef = useRef(null)

<div>
   <button
    ref={buttonRef}
      id="dropdownSearchButton"
      data-dropdown-toggle="dropdownSearch"
      data-dropdown-placement="bottom"
      className="sm:max-w-md max-w-xs w-full justify-center text-gray-100 focus:ring-4 focus:outline-none font-extrabold rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center bg-gray-800 hover:bg-gray-900 "
      type="button"
    >

 <li >
              <a href="#" onClick={()=>buttonRef?.current.click()}
                className="block px-4 py-2 hover:bg-gray-600 hover:text-white cursor-pointer"
              >
                {d}
              </a>
            </li>
</div>

[johnchrisnew]

Any Updates on this problem? No fix solution from Maintainer yet?

[aphrxia]

This is now possible if you are in 2.x:

const theDropdown = FlowbiteInstances.getInstance('Dropdown', 'the-dropdown-id');
theDropdown.hide();

More info on FlowbiteInstances: https://flowbite.com/docs/getting-started/javascript/#instance-manager

If you are using older version, something like his should work (taken from @jamilbk 's reply):

const theDropdown = new Dropdown(
    document.getElementById('the-dropdown-id'),
    document.getElementById('the-dropdown-trigger-id')
);
theDropdown.hide(); // or sth else

it looks weird if you are using data attributes to create the dropdown, but it did the job.

[mishatuesday]

I can hide the dropdown ul with an onClick in the li, but next time the button is clicked, it remains hidden. Not until an additional click will it toggle back to visible. So hiding it without toggling it is not a proper solution.

[nchankov]

Yeah I have the same issue. I tried various ways but appear that the button (trigger) itself is not being reset and second click actually tries it to close the dropdown which is already hidden.

So also dropdown-autoclose would be not a bad addition

[nchankov]

ok, I found a "dirty" hack. You can use the following:

document.getElementById('the-dropdown-trigger-id').click();

which would effectively click over the trigger button and this way the behaviour is expected. But still waiting for more elegant solution

[leikoilja]

agree that's a bit hacky, but that's for sharing your solution @nchankov . that's the only thing that worked for me without nasty side-effects

[jacobseated]

lol I seriously thought it was just me not understanding Flowbite, because this is such a vital and basic thing to want to do I would expect it to exist. No wonder it was not documented. Mind you, I have been delayed several times because of this exact issue, as we had to implement custom functionality using Flowbite components.

Further more, the documentation has been quite misleading by saying the first parameter to e.g. "new Accordion()" is a reference to the HTML element, as fetched via getElementById or querySelector. Not so! I kept getting a items.map is not a function error in devtool console, and only by experimenting (more or less guessing at random) did I discover that the first parameter has to be an array of items defined in some abstract way – not the freaking element itself as is erroneously documented!

For those interested in a workaround, you can simply define your own components, as is somewhat documented, but it is obviously not ideal because the automatic initialization will not work, and you even have to attach your own event handlers on existing buttons.

I did manage to get certain things to work the automatic way, by hacking it in similar ways to @nchankov, but it caused other problems that I then wasted time trying to solve. Of course, I have no idea what version of Flowbite we are using or how to check it, but the instance manager does not seem to be available, so presumably we are not on 2.0... I even tried asking earlier, but no luck there: #752

[r4cker]

related to #567

[r4cker]

For future me since it's not fixed and i'll probably land here again :

when click is triggered :

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

[jacobseated]

Yes, I think that will work for new versions. I realized that at some point, but in our case, we were still stuck on an old version that did not have an easy way to access the various instances, if my memory does not fail me.

The way I ended up solving it was by defining the element manually. E.g. Each method defined manually, and then I initialized Flowbite again after defining the components, which gave me access to the methods I needed. It required a horribly unjustified amount of coding and experimentation, but ultimately it worked.

Something like the below (taken from the documentation):

const accordionElement = document.getElementById('accordion-example');
const accordionItems = [ ... ]
const options = { ... }
const instanceOptions = { ... }

const accordion = new Accordion(accordionElement, accordionItems, options, instanceOptions);

Also, I faintly remember something about Flowbite being automatically initialized in our setup, which would automatically init the components on the page. This meant I had to override it it again manually. I think this auto-loading also needs to be turned off, and then you manually initialize it on the pages where it is used. I was not informed about how this worked, hence my confusion at the time.

But, while this is a one-time-effort, it is also a horribly nasty amount of code, just to be able to control components manually.

I got fired from the job around the same time I wrote the OP, so I no longer work with Flowbite, and so, I will go ahead unfollow this thread as it no longer interests me.