3

I have a simple thing I want to do - when someone tabs over to my ui-select, I want it to drop down automatically. Unfortunately, the ng-focus doesn't seem to fire when the focus changes to the ui-select. Is there a workaround?

Nick Kahn
  • 19,652
  • 91
  • 275
  • 406

2 Answers2

1

Try this if you are looking for a quick workaround:

app.directive('showOnFocus', function() {
   return {
       restrict: 'A',
       link: function (scope, element) {
           var focused = false, opened = false;
           var select = element.children('.selectize-input');
           var toggleInput = element.find('input')[0];

           var onfocus = function(){
               if(!focused && !opened) {
                  toggleInput.click();
                  opened = focused = true;
               } else if(opened) {
                  opened = false;
               }
           };
           var onhover = function(){
              if(!focused && !opened){
                  toggleInput.click();
                  opened = focused = true;
               };
           };

           var onblur = function(){
              focused = false;
           };
           element.bind('mouseenter', onhover);
           element.bind('click',onblur);
           select.bind('blur', onblur);
           select.bind('focus', onfocus);

           //show on pageload
           onhover(); 
       }
    };
});

And apply the directive in your ui-select element 

<ui-select show-on-focus>..</ui-select>

Hope this helps.

Karthik
  • 1,377
  • 6
  • 8
  • I have implement your suggestion and you can fine here http://plnkr.co/edit/OQ9xs88LbF0itQAdQK62?p=preview its bit tricky and does not drop when the it set focus using tab it only drops when you hover over it (obliviously) and what do i do to drop only when it focus? – Nick Kahn Dec 31 '14 at 22:28
  • Thanks Karthik, when I implement the same code on my page it only drops once when the page is load but after that it does not drop even after i hover over the ui-select and i'm unable to reproduce the same behavior in plnkr... – Nick Kahn Jan 01 '15 at 05:42
  • Possible to put your piece of code in a plnkr? I would like to see how you have the ui-select configured. – Karthik Jan 01 '15 at 19:12
  • okay after i spent some time figuring out I found that if i have `'input'` instead of `'.selectize-input'` then it works fine but the plnkr worked fine with `'.selectize-input'` i have no idea why its not working with `'.selectize-input'` – Nick Kahn Jan 03 '15 at 03:25
  • if i have to drop the ui-select when the page loads then do i have to bind onload event? – Nick Kahn Jan 03 '15 at 03:26
  • you can directly call the onhover method on the link function that gets executed when the directive gets loaded. updated the code for you. – Karthik Jan 03 '15 at 03:28
  • if i add `onhover()` getting this error `Error: [$rootScope:inprog] $digest already in progress` – Nick Kahn Jan 04 '15 at 23:50
0

The showOnFocus directive was not working for me. I added an additional input(hidden, but not invisible) become focused, and turned off the tabindex of the ui-select.

<custom-directive>
  <input class="custom-focuser" tabindex="0" style="left: 10000px"/>
  <ui-select tabindex="-1"/> 
</custom-directive>

Then in the custom directive's link function, I attached to the focus event of the additional input.

app.directive('customDirective', function () {
  return {
    // ...
    link: function ($scope, el, attrs, ctrl) {
      el.find('.custom-focuser').focus(function (event) {
        //your custom logic here
      });
    }
  };
});
Steve Ellis
  • 494
  • 5
  • 13