How to manually toggle angular-ui-select dropdown

Question

I'm using AngularUI's ui-select to create several multiselects on a page. I need to be able to open the dropdown list when a user clicks on a button on the page.

I've tried using jQuery's .click() and .toggle('click') on the element, but these result in a $apply already in progress error when called by in the button's ng-click function. They work when called from Chrome's console though. The function in ng-click doesn't do anything besides simulating another click.

.focus() doesn't do anything, besides focusing the input.

I also reluctantly tried a nasty hack, where I used the select's ng-init to store it's controller to a scope the button has access to, and then using the controller's toggle() and activate() methods. This gave focus to the input, but the associated dropdown list wont open.

How can I toggle the dropdown manually, from outside the ui-select element's context?

Here's a Plunker you can play with.

Answer 1

I have tried and could be achieved by directive method. working fiddle

angular
  .module('myApp', [
    'ngSanitize',
    'ui.select'
  ])
  .controller('testController', function ($scope) {
    $scope.things = ['item1', 'item2'];
    $scope.clickOnInput = function() {
      //jQuery('#searchBarArea').click();
    };
  })
  .directive('openMenuByClick', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
               element.bind('click', function () {

                 $timeout(function () {
                     $("#"+attrs.openMenuByClick).find('input').click();
                });


            });
        }
    };
});

Add this attribute directive to your button

<button id="btn" open-menu-by-click="searchBarArea">Click me</button>

Answer 2

I recommend to use the $select service in a custom directive instead of trying to hack your way around by clicking programmatically.

You can then access ui-select's built in actions like
$select.toggle() for toggling the dropdown
$select.activate() for opening and
select.close() for closing the dropdown.

myModule.directive('myUiSelect', function() {
  return {
    require: 'uiSelect',
    link: function(scope, element, attrs, $select) {
      $select.activate(); // call this by an event handler
    }
  };
});

And in your template

<ui-select my-ui-select>
  ...
</ui-select>

See reference: https://github.com/angular-ui/ui-select/wiki/Accessing-$select