how to open dropdown in angular js?

Question

can we open the dropdown when it focus using tab keyword .I want to open the drop down while using tab navigation .

Example if I am in input field (focus to input field ) then if I press tab focus goes to button then drop down , here I want to open the drop down here is my code http://codepen.io/anon/pen/RGKKrd?editors=1010

angular.module('app',[ ]).directive('abc',function(){
  return {
        restrict: 'EA',
        link: function (scope, element ,attr) {
            element.on('keydown', function (evt) {
                if (evt.which ===9) {
                   // evt.preventDefault();
                }
            });
        }
  }
})

I think it might be helpful.. [Link](http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list) — Tal, Sep 22 '16 at 10:46

score 1 · Answer 1 · edited May 23 '17 at 12:00

You cannot programmatically open a select

See here and here

If you are looking for a workaround here is something I have made. Navigate to the select box with tab key and select your option. The select will stay open as long as it is in focus. It closes on focusout

Here is the directive

angular.module('app',[ ]).directive('abc',function(){
  return {
        restrict: 'EA',
        link: function (scope, element ,attr) {

            element.on('keyup', function (evt) {
                if (evt.which ===9) {
                  var length = element.find("option").length;
                  element.attr("size",length);
                  //element.attr("size",0);
                }
            });

            element.on('keydown', function (evt) {
                if (evt.which ===9) {
                  var length = element.find("option").length;
                  element.attr("size",0);
                  //element.attr("size",0);
                }
            });

        }
  }
})

Not the best solution, but close to what you are looking for.

score 0 · Answer 2 · answered Sep 22 '16 at 11:16

You Can not do it, But there is some work around kind of code you can go with. You can change your Js code like this.

  angular.module('app',[ ]).directive('abc',function(){
   return {
    restrict: 'EA',
    link: function (scope, element ,attr) {
        element.on('keydown', function (evt) {
          if (evt.which ===9) {
            //debugger;
            if(document.activeElement.localName==="select"){
                        angular.element(document.activeElement).attr("size",1);
             }
            if(document.activeElement.nextElementSibling!==null && document.activeElement.nextElementSibling.localName==="select"){
            angular.element(document.activeElement.nextElementSibling).attr("size",document.activeElement.nextElementSibling.childElementCount);
            }

            }
        });

    }
  }
 })

This is not a proper solution , just a workaround

how to open dropdown in angular js?

2 Answers2