Skip to content
GitLab

Fix arrow navigation in dropdown with input

Closed Julien Déramond requested to merge main-jd-fix-up-down-keyboard-with-search-input-and-dropdown into main

Fixes #36598 (closed)

Apparently due to https://github.com/twbs/bootstrap/commit/bb7664db0aea2dddbc637992d2d0e78632dc2e68 I tried to reintegrate the previous behavior for input/textarea. If it was removed on purpose in this commit, please close this PR and the corresponding issue.

Live preview

For non-regression testing

Manual test

<div class="dropdown">
  <input id="search" class="form-control dropdown-toggle" type="text"
  placeholder="Search..." 
  data-bs-toggle="dropdown"
  aria-expanded="false" aria-label="Search...">
  <ul class="dropdown-menu mt-1 dropdown-menu-end" aria-labelledby="search">
      <li><a class="dropdown-item" href="#">Item 1</a></li>
      <li><a class="dropdown-item" href="#">Item 2</a></li>
      <li><a class="dropdown-item" href="#">Item 3</a></li>
      <li><a class="dropdown-item" href="#">Item 4</a></li>
      <li><a class="dropdown-item" href="#">Item 5</a></li>
  </ul>
</div>

And then press UP/DOWN key when the input is focused.