question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

toggle doesn't close the dropdown if there are no [data-toggle="dropdown"]

See original GitHub issue

ver 4.1

I’ve created Dropdown in javascript

 $(this.dropDownMenu).dropdown({
                    placement: 'bottom-start',
                    flip: false,
                    reference: this.filterInput
                });

dropDownMenu <ul> element contains both dropdown dropdown-menu

first point: toggle method open it (btw dropdown class is vital there, without it plugin doesn’t work - why?)

second point: toggle doesn’t close it.

Through debugger I see this logic

           // bootstrap dropdown code
          var context = $$$1(toggles[i]).data(DATA_KEY);
          var relatedTarget = {
            relatedTarget: toggles[i]
          };

          if (!context) {
            continue; // here we enter
          }
         //  remove `show`  class will be never passed.

I expecect that Dropdown could be opened and closed manually (through JS) - then requrements to have toggles is excessive (the same is true for dropdown class requirement - you use it to find dropdown-menu but if dropdown-menu by itself is an jquery element - it still should work )

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
mkleehammercommented, Jun 6, 2019

Same. To be clear, I think OP is looking for a way to have a manually controlled dropdown without the automatic data-api triggering it to open.

In my case I’d like to display a dropdown under search input group, but I don’t want the user toggling it open and closed while the search is still executing. I’ll find a workaround, but it would be simpler if there was an alternative markup that would stop the built-in event handler. (I’ll probably go adding the “disabled” class to the input group, which I see the dropdown looks for. Not sure where that rabbit trail leads, though.)

0reactions
mdocommented, Sep 19, 2020

Docs state the requirement about the data attribute in a (hopefully obvious) callout. https://getbootstrap.com/docs/4.5/components/dropdowns/#via-javascript

https://github.com/twbs/bootstrap/commit/f3d0fee91ec30aa6cde08de821b06fd6f337a3a3

Beyond that, I don’t think there are any planned changes to how dropdowns work here unless @Johann-S wants to revisit things.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Avoid dropdown menu close on click inside - Stack Overflow
Bootstrap provides the following function: | This event is fired immediately when the hide instance method hide.bs.dropdown | has been called. The toggling...
Read more >
Dropdowns · Bootstrap v5.0
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript ...
Read more >
How to avoid dropdown menu to close menu items on clicking ...
How to avoid dropdown menu to close menu items on clicking inside ? · Click Inside: · Click Outside: O/P after click outside....
Read more >
Bootstrap dropdown menu won't close - not related to "Make a ...
I am able to get the dropdown menu to show with $(“.dropdown-menu”).dropdown('toggle'); but for some reason i can't close it again. here is...
Read more >
Navbar dropdown menus not closing at click
The problem is probably because you have system animations turned off. Dropdown closing has been fixed in MDB5 Standard. If you still have...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found