Search code examples
ngx-bootstrap

In ngx-bootstrap 7.0.0, dropdown is not closed after clicking on another one

Versions：
ngx-bootstrap: 7.0.0
Angular: 12.1.3
Bootstrap: 4.6.0

Clicking on a dropdown button after another dropdown is opened, the first dropdown is not closed.

But in ngx-bootstrap@6.2.0, it didn't happen.

How can I solved this issue? Any idea?

Solution

  • I ran into the same problem today. Turns out this is an unsolved issue that's been looked at by the Angular bootstrap Community. My guess is that it will be resolved soon.

    https://github.com/valor-software/ngx-bootstrap/issues/6248

    However as a work around: An element with the dropdown-menu class is shown by adding the show class. So you could give every menu a ref:

    <ul class="dropdown-menu" #menu1>...</ul>
<ul class="dropdown-menu" #menu2>...</ul>

    And upon a click event on any dropdown navigation item, trigger a function that removes the show class on all of these elements.