How to open select box when pressing tab key?

Question

When pressing the tab key, the focus changes to another field. What I want is that, when the focus comes to a <select>, the option list is shown.

This is working:

  <div ng-controller="TypeaheadCtrl">
  <input type="text" /><br>
    <input type="text" /><br>
    <input type="text" ng-model="selected" typeahead="state for state in states " />

</div>

This is not working:

<div ng-controller="TypeaheadCtrl">
  <input type="text" /><br>
    <input type="text" /><br>
    <!-- this is not working -->
    <select  ng-model="selected" >
                            <option value="aa">aa</option>
                            <option value="bb">bb</option>
                        </select>
</div>

My plunker code is here.

Possibly related http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list — Miguel Mota, Apr 26 '15 at 07:07

score 2 · Accepted Answer · answered Apr 28 '15 at 19:24

You could take use of this directive which will open select box on focus

Directive

.directive('openSelect', function(){
  return{
    restrict: 'AE',
    link: function(scope, element, attrs){
      element.on('focus', function(){
        element.prop('size',element[0].options.length);
      })
      element.on('blur change', function(){
        element.prop('size',1);
      })
    }
  }
})

Markup

<select ng-model="selected" open-select>
  <option value="aa">aa</option>
  <option value="bb">bb</option>
</select>

Working Plunkr

How to open select box when pressing tab key?

1 Answers1