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.

Dropdown multiple in same line collapse the same dropdown in diferent button

See original GitHub issue

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

When two dropdowns are used in the same row, they do not work and both are not displayed, only the first one is displayed, the same happens even in the Bootstrap 5 documentation.

In the section Buttons with dropdowns

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action before</a></li>
    <li><a class="dropdown-item" href="#">Another action before</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

https://getbootstrap.com/docs/5.2/forms/input-group/

Reduced test cases

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action before</a></li>
    <li><a class="dropdown-item" href="#">Another action before</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

https://getbootstrap.com/docs/5.2/forms/input-group/

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2.0

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

GeoSotcommented, Jul 21, 2022

Dropdown, by default , supports two elements (menu, toggle), inside a wrapper. So I suppose this can be solved using a wrapper (div) around each dropdown.

However, it seems was working on 5.1.3 & probably is caused by https://github.com/twbs/bootstrap/pull/35752/files (line 93) and (not preferable) I can add a PR fixing this back as a regression

1reaction

julien-deramondcommented, Jul 21, 2022

@mdo I’m also disturbed by the result. I’ve created an example to illustrate what’s been said in the issue in https://stackblitz.com/edit/ybpfci?file=index.html.

Two different dropdowns are in the markup but only the first dropdown menu is displayed when triggered by the first and second dropdown buttons.

Screenshot from 2022-07-21 22-11-00

Top Results From Across the Web

Align bootstrap nav elements on the same line on collapse

When collapsed I want the text: This is a Button to next to the button “button1”. · If I manage to display them...

Dropdowns - Bootstrap

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown ...

Line-by-line: advanced CSS tricks for click-to-open drop-down ...

Preparing the initial appearance ... .combobox and .dropdown need to be relative so that the drop-down popup can be positioned relative to them....

Dropdown - Multiselect - Carbon Design System

Dropdowns present a list of options from which a user can select one option, or several. A selected option can represent a value...

How To Create a Cascading Dropdown - W3Schools

Create three dropdown lists, inside an HTML form. The second and third dropdown list will display different options, depending on the value selected...