Dropdown is not hiding automatically after click on a dropdown link on navbar

[diptomondal007]

This is about the Bulma CSS framework..I am working on a project and i am using bulma dropdown on navbar..but the dropdown is not hiding after clicking on link of the dropdown and to make it hide another click is needed outside..How can i fix this..??

[phunanon]

I have the same problem. @diptomondal007, did you find a solution?

[jgthms]

Any example?

[diptomondal007]

This problem is happening in react if i use navbar as a generic component in routing...I have solved that problem by using jbx bulma(a bulma react library). @phunanon

[phunanon]

It happens for me even without React when I investigated. I visit the menu example here, inspect the "About" item and add href="#". The element remains "active" after a click, preventing the drop-down hide (Firefox 69). Weird though: giving it a 'proper' href such as #basic-navbar avoids the issue, but on my React app I'm using a 'proper' href and it's still not closing.

[diptomondal007]

@phunanon you may try jbx...and without react you may use jquery to solve the problem..there are so many jquery solutions available..

[simplenotezy]

I have the same issue, quite annoying. I am using vue

[slidenerd]

A dropdown made with is-hoverable does not close automatically after navigating away from the current page, on nuxt.js here

[rknidzam]

I ended up use this solution. I'm using React JS to control the NavBar Burger.

1) I used React Hooks

const [isActive, setisActive] = useState(false);

2) Then in the navbar-burger button I used onClick eventto open the NavBar.

onClick={() => {
setisActive(!isActive);
}}

3) Lastly, I do the same on all the navbar item link.

onClick={() => {
setisActive(!isActive);
}}

Hope it helps.

[itsip]

Here's another solution for this using react without having to use state.

I just add onClick={(event) => { event.target.blur(); }} to any dropdown links.

Example with react-router:

<div className="navbar-item has-dropdown is-hoverable">
  <span className="navbar-link">Dropdown Text</span>
  <div className="navbar-dropdown">
    <Link className="navbar-item" to="/path" onClick={(event) => { event.target.blur(); }}>
      Link Text
    </Link>
  </div>
</div>

[FunctionDJ]

Here's my implementation if anyone comes across this: https://github.com/couds/react-bulma-components/issues/382

[romikforest]

I use document?.activeElement?.blur();. event.target.blur(); and currentTarget don't work on complex elements.

[lukaszkrzywizna]

I guess this CSS can help:

.navbar-dropdown:focus-within:not(:hover) {
    display: none
}

[foximoxi]

I solved it with a piece of JS code. At the moment of clicking, you can set the style.display=none and after a short timeout set the empty value again.

Not elegant but works. Other methods described here have not worked. Invoke function onclick: function hideMenu(id) { let el = document.getElementById(id); el.style.display = 'none'; setInterval(function () { el.style.display = ''; }, 50); }