CODEWITHSUNDEEP
angularjsangularjs-directive
pinoyyid
pinoyyid

Reputation: 22306

Is it possible to have an ngOptions dropdown expand on focus?

If I click on a then the ngOptions list is expanded. Is it possible to get the same behaviour onFocus during keyboard navigation?

Upvotes: 0

Views: 1726

Answers (1)

ryeballar
ryeballar

Reputation: 30098

You can create a directive, that attaches a focus event to a select tag and manipulate the size property of the select tag during focus and blur. Below is a code snippet that includes a directive, expandFocus, that demonstrates expansion of the select options on focus and its contraction on blur.

angular.module('demo', [])

  .controller('Ctrl', function($scope) {
     $scope.colors = [
        {name:'black', shade:'dark'},
        {name:'white', shade:'light'},
        {name:'red', shade:'dark'},
        {name:'blue', shade:'dark'},
        {name:'yellow', shade:'light'}
     ];
  })

  .directive('expandFocus', function() {
     return function(scope, jqElem, attr) {
         var elem = jqElem[0],
             tag = elem.tagName.toLowerCase();

         if(tag == 'select') {
         	jqElem.on('focus', function() {
               elem.size = elem.length;
            });

            jqElem.on('blur', function() {
               elem.size = 0; // normally you would use 1 but firefox uses 0.
            });

            scope.$on('$destroy', function() {
              elem.off('focus');
              elem.off('blur');
            });
         }
     };
  });
<div ng-app="demo" ng-controller="Ctrl">
	<select ng-options="color.name for color in colors" ng-model="mainColor" name="mainColor" expand-focus>
      <option value=""> -- Select </option>
  	</select>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Upvotes: 1

Related Questions