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.

Could you make a fiddle for better understanding – Asik Nov 04 '14 at 17:50 — Asik, Nov 04 '14 at 17:50
@Asik added link to the question – Schlaus Nov 04 '14 at 18:23 — Schlaus, Nov 04 '14 at 18:23

score 8 · Accepted Answer · answered Nov 04 '14 at 18:57

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>

A bit late to the game, but with ui-select 0.19.5, the following worked for me: `$("#"+attrs.clickUiSelect).find('span')[0].click();` — twip, Apr 06 '17 at 20:52

David Salamon · Answer 2 · 2016-10-04T16:54:12.090

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

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

1

Maybe you can bind a property to the size attribute of the dropdownlist. Set the property to a number like "6" to make it appear as if it was opening and back to "1" when you want it to collapse. Otherwise I'm not sure there's any other way. See reference here.

edited May 23 '17 at 12:17

Community

1
1

answered Nov 04 '14 at 17:53

mikelt21

2,728
4
23
33

Thanks for the answer, but I don't actually have a select element to do this with. Please see the Plunker I added to the question. – Schlaus Nov 04 '14 at 18:29

score 0 · Answer 4 · edited May 29 '17 at 12:01

An example developed for you as below

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        function showUser(){
            var siz = $("#sem option").length;
            if($("#sem").attr("size")!=siz){
            $("#sem").attr('size',siz);
            }else{
            $("#sem").attr('size',1);
            }
        }
    </script>
    </head>
    <body>
    <select name='sem' id = 'sem' style = 'margin-left: 3.4em;' class = 'shor_list'>
                    <option value='Null'>------Select Semester------</option>
                    <option value='1st'>1st</option>
                    <option value='2nd'>2nd</option>
                    <option value='3rd'>3rd</option>
                    <option value='4th'>4th</option>
                    <option value='5th'>5th</option>
                    <option value='6th'>6th</option>
                    <option value='7th'>7th</option>
                    <option value='8th'>8th</option>
                    </select>
    <span onclick="showUser();">update list</span>
    </body>
</html>

but there seems to be a better way but, you gotta pay for it LINK

score 0 · Answer 5 · answered Dec 20 '16 at 09:46

0

I found also another solution, ie. to test ui-select with capibara and jQuery:

$('.ui-select-container').scope().$select.open = true;
$('.ui-select-container').find('.ui-select-choices-row').first().find('a').click();

answered Dec 20 '16 at 09:46

Darex1991

855
1
10
24

score 0 · Answer 6 · answered Mar 17 '17 at 15:37

0

Accessing $select with require: 'uiSelect' does not work.

Try $elem.find('input').click() to open and $('body').click() to close the ui.

answered Mar 17 '17 at 15:37

Harrison Powers

359
1
7
16

How to manually toggle angular-ui-select dropdown

6 Answers6

Linked