bootstrap

bootstrap copied to clipboard

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] 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

We only allow one dropdown open at a time, you'll note this is how it works across our examples in the docs. No bug here :).

Ok, but in docs en both case button dropdown, open the same menu

@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.

Exaclty @julien-deramond , thanks for the example

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

What is the status of this problem? Is an example form documentation correct or not?

Using div wrapper for the second toggle fixes the dropdown behaviour but brokes its borders.

Thank you for believing in me.

On Tuesday, August 16, 2022, Jarek300 @.***> wrote:

What is the status of this problem? Is an example form documentation https://getbootstrap.com/docs/5.2/forms/input-group/#buttons-with-dropdowns correct or not?

Using div wrapper for the second toggle fixes the dropdown behaviour but brokes its borders.

[image: image] https://user-images.githubusercontent.com/10242002/184855436-e82fd05c-1b93-461a-9994-42d3eef2bedb.png

— Reply to this email directly, view it on GitHub https://github.com/twbs/bootstrap/issues/36803#issuecomment-1216440759, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHORFC5NAFBGLIMI3K3RF5LVZNTNTANCNFSM54IC5LAA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

This issue poses a problem when we want to have multiple dropdown menus toggled from the same input group - consider for example this component for entering date ranges.

It would be beneficial, if we could wire up the toggle buttons to a specific dropdown menu, it seems it was possible in previous versions with the data-target attribute, however, it doesn't work in v5.2.