How to enable up and down arrow keys in bootstrap dropdown

Question

Bootstrap 3 panel title contains dropdown using code below. If dropdown is opened, up and down arrows do not move between items. How to enable dropdown navigation using up and down arrow keys ?

<div class="panel panel-success grid-panel-header">
    <div id='contentCaptionDiv' class="panel-heading">
        <div class="panel-title form-inline"> 
            <a class="btn" href="Show">
                <i class="fa fa-male" aria-hidden="true"></i>
            </a>
            <a class="btn" href="Delete">
                <i class="fa fa-female" aria-hidden="true"></i>
            </a>
        <div class="dropdown" type="button">
            <div class="dropdown-toggle" data-toggle="dropdown" role="button" href="#"> 
                <i class="glyphicon glyphicon-cog"></i>
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            </ul>
          </div>
        </div>
    panel content here
</div>

Solution 1

The reason that you code doesn't work is because you use a <div> for .dropdown-toggle.

Make it a <button> and it will work.

Strange enough, not even this kind of element works: span.btn.btn-default.

---

Another reason that do not apply to your case:

Make sure your <a> elements inside the <li>s have an attribute of href="#" or href="" (ir that the attribute exists, in general).

Solution 2

href="#" works indeed for arrow keys. Using this causes page 404 redirect on item select. If you are not looking to redirect to another page use this work around: href="javascript:" instead of href="#"

Comments

[Luca_Rosario_Pappa]

maybe this can help you: stackoverflow.com/questions/15720107/…

[Andrus]

Adding role='menu' allows only donw arrow key to activete first dropdown item. Pressing up and down arrow keys after does not have any effect

[NoOne]

@Andrus You probably have something interfering with Bootstrap. This should work. Take a look here: jsfiddle.net/damphat/WJS9p. Make sure you allow focus on the button (and probably on the subitems).

[NoOne]

One crazy reason I have found for this not to work is to omit the href="#" on the <li>. But you have them so that's not it...