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

Tal
– Tal

2016-09-22 10:46:28 +00:00
Commented Sep 22, 2016 at 10:46 — Tal
– Tal, Commented Sep 22, 2016 at 10:46

Community · Accepted Answer · 2017-05-23 12:00:53Z

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.

Viplock · Accepted Answer · 2016-09-22 11:16:29Z

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

Collectives™ on Stack Overflow

how to open dropdown in angular js?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related