Unable to navigate through bootstrap dropdown items using keyboard shortcuts

Question

Unable to navigate through bootstrap dropdown items using keyboard shortcuts

I am currently working on a bootstrap dropdown menu that is filled with time zone details. Everything seems to be in order as the dropdown gets populated correctly. However, when I click on it and try to select an item by pressing a key on the keyboard (for instance, "P"), it doesn't choose the appropriate option from the list. Below is the code for the dropdown:

HTML

<select class="form-control" name="timeZone" ng-model="engagement.timeZone" ng-init="engagement.timeZone=timezones[37].code" ng-options="timeZone.code as timeZone.name for timeZone in timezones" required></select>

The result looks like this.

https://i.sstatic.net/6p0bb.png

My objective is to have the dropdown automatically select the first item that matches the letter pressed on the keyboard (without behaving like a filter).

UPDATE

Through my testing, it appears that this issue may not be related to bootstrap after all. Even after removing all bootstrap classes, the problem still persists. Could it possibly be connected to Angular instead?

javascript html css angularjs twitter-bootstrap

Answer 1

Answer №1

When working with Bootstrap drop-down components, it is not possible to select an element by pressing a key on the keyboard. To overcome this limitation, you can use the following code snippet which employs a directive:

myApp.directive('keypressEvents',

    function ($document, $rootScope) {

    return {

    restrict: 'A',

    link: function (scope, element, attr) {

        console.log('linked');

        $document.bind('keypress', function (e) {

        $rootScope.$broadcast('keypress', e,  String.fromCharCode(e.which)); 

        var letter = String.fromCharCode(e.which);

        var target = e.target;

        var charat = element[0].textContent.charAt(0);

        if(charat === letter){ 

           element.addClass("red");

        }

      });

    }

  }

});

The directive mentioned above listens for keypress events and sets a class for an element whose first letter matches the pressed key. Remember to focus on this:

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropup
   <span class="caret"></span>
  </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li keypress-events><a href="#">action</a></li> 
       <li keypress-events><a href="#">something else here</a></li> 
     </ul>
</div>

In this example, the directive is applied to the li elements within the dropdown menu.

Answer 2

When working with Bootstrap drop-down components, it is not possible to select an element by pressing a key on the keyboard. To overcome this limitation, you can use the following code snippet which employs a directive:

myApp.directive('keypressEvents',

    function ($document, $rootScope) {

    return {

    restrict: 'A',

    link: function (scope, element, attr) {

        console.log('linked');

        $document.bind('keypress', function (e) {

        $rootScope.$broadcast('keypress', e,  String.fromCharCode(e.which)); 

        var letter = String.fromCharCode(e.which);

        var target = e.target;

        var charat = element[0].textContent.charAt(0);

        if(charat === letter){ 

           element.addClass("red");

        }

      });

    }

  }

});

The directive mentioned above listens for keypress events and sets a class for an element whose first letter matches the pressed key. Remember to focus on this:

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   Dropup
   <span class="caret"></span>
  </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li keypress-events><a href="#">action</a></li> 
       <li keypress-events><a href="#">something else here</a></li> 
     </ul>
</div>

In this example, the directive is applied to the li elements within the dropdown menu.

Unable to navigate through bootstrap dropdown items using keyboard shortcuts

Answer №1

Similar questions

What are the best methods for concealing the URL or video source in JWPlayer 7 or Flowplayer version 6.0.5?

Retrieving a Date object from a JSON response

What is the reason that (click) does not send my data within <button>, while (change) within <input> does in Angular and HTML?

Revamp the HTML page by automatically refreshing labels upon every Get request

Ways to set a default image for an <img> tag

Is the onmouseover / onmouseout transition failing to function properly?

How to apply styles to a child component using CSS modules in a parent component

Using the filter() function in jQuery allows for efficient sorting and

Golang template's nested ranges

Utilize Node.js driver to export a Mongo collection into a JSON file

Guide to incorporating rate-limiter-flexible into your current node.js express configuration

Challenges between Django and VSCode

What techniques can be applied to utilize JSON data in order to dynamically create menu components using the map method?

Is it possible to set environment variables in Next.js outside of the pages directory?

Limiting drag and drop in Three.js with specified distance thresholds

Using jquery to loop through JSON objects based on their values

picture is not properly aligned with the right side of the container

The functionality of Bootstrap 5's modal-dialog-scrollable seems to be malfunctioning

Zebra lines overlooking unseen details

"Enhancing the spacing between background images through CSS: A guide to using the repeat property