[v5-b3] Using a `select` menu in a dropdown in a navbar collapses the dropdown menu
See original GitHub issueHi,
Here’s a reproducer:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
</select>
</li>
</ul>
</li>
</ul>
</nav>
- expand the dropdown menu by clicking on it
- select an item in the menu (e.g. “One”)
Outcome: the dropdown menu gets collapsed upon selecting an item Expected: the dropdown menu remains open, to allow for example submitting the form that the select input is a part of
I haven’t tried outside of a navbar (apparently Popper is not needed for dropdowns in navbars?).
HTH.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Navbar dropdown (collapse) is not working in Bootstrap 5
I am facing a issue when trying to create a responsive menu or dropdown button with Bootstrap 5 .Everything ...
Read more >Drop Down Navigation Menu with Bootstrap 4 - YouTube
Tutorial Starter Files: https://m.w3newbie.com/w/tutorial-34.zip➢Website Template Bundle: https://w3newbie.com/template-bundle/➢Courses: ...
Read more >Bootstrap Navbar Dropdown - CSS3 Menu
- Navbars demand a wrapping .navbar with .navbar-toggleable-* intended for responsive collapsing and color design classes. - Navbars and their items are ...
Read more >Bootstrap: Creating Menus, Navbars, and Modals | Codecademy
In ·, replace the current nav option that reads “About” with a dropdown menu. ; Launch your web browser and open ·. Click...
Read more >[Solved] Bootstrap dropdown menu not visible - CodeProject
I have the navbar which is visible but the drop down menu is not visible. I have copied the code from the bootstrap...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks a lot @alpadev!
Yeah it only does this in Firefox… For some reason the event.target is
option
not theselect
like in other browsers…@mdo should I reopen and fix that?