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.

[v5-b3] Using a `select` menu in a dropdown in a navbar collapses the dropdown menu

See original GitHub issue

Hi,

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:closed
  • Created 2 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
lenormfcommented, Apr 18, 2021

Thanks a lot @alpadev!

1reaction
alpadevcommented, Apr 14, 2021

Yeah it only does this in Firefox… For some reason the event.target is option not the select like in other browsers…

@mdo should I reopen and fix that?

Read more comments on GitHub >

github_iconTop 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 >

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