This is some working code from the Bootstrap 5 Dropdown documentary (.3/components/dropdowns/):
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<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>
</ul>
</div>
If I change it so that .dropdown-toggle is an input the dropdown is shown, but the ability to move through individual .dropdown-item elements using the cursor keys is gone.
<div class="dropdown">
<input type="text" class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" />
<ul class="dropdown-menu">
<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>
</ul>
</div>
How can I get that ability back?
Here is the live snippet showing both the scenarios:
<script src="/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href=".3.0/css/bootstrap.min.css" />
<script src=".3.0/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<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>
</ul>
</div>
<div class="dropdown">
<input type="text" class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" />
<ul class="dropdown-menu">
<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>
</ul>
</div>