ui-select Does Not Drop Down On Click

Question

Got a time-sink of a bug which is hard to solve. I'm implementing a multi-select control using ui-select.

As you can see in the plunks from that site, when you click on the inputs, you are meant to get a drop-down list.

With my attempt, I am not getting anything when I click on the input, unless I click in the list first, and then about 1cm below the list (which is where the actual ul is).

Otherwise, it does work if I start typing (it filters and searches). Everything else works too - the on-select and on-remove handlers.

I even copy and pasted the stuff in the plunk which the AngularJS UI team have on their site.

<ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="ctrl.disabled" sortable="true" close-on-select="false" style="width: 800px;">
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
<ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
  <div ng-bind-html="person.name | highlight: $select.search"></div>
  <small>
    email: {{person.email}}
    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
  </small>
</ui-select-choices>
</ui-select>

So, why do I have to click on the actual ul, rather than the input (which is how it works in the given plunks)?

Some further info. Above I mentioned that I first have to click the input and then click 1cm below it. This is because the ul is being rendered upon the clicking of the input, but it is being given an opacity of 0. I found why that is happening in the select javascript code, but commenting it out did not really solve anything. It works for the very first click, but all subsequent clicks need to be 1cm below again (i.e. on the ul).

At first I thought my usage of animate might be the cause, but I removed that and the issue did not resolve.

I have prepared a plunk where I have identified what is different to my project. I have added a debugger statement at line 1455 of the select.js file. In the block that follows, a handler is hooked up by the $animate api for the enter event. In the plunk, the program execution follows into that handler (presumably because the event is fired). In my project, it never fires. This is that handler:

$select.$animate.on('enter', dropdown, function (elem, phase) {
if (phase === 'close' && needsCalculated) {
  calculateDropdownPosAfterAnimation();
  needsCalculated = false;
}
});                                         

Strange that it would never fire.

Any help would be appreciated. Cheers.

Answer 1

So this is a bug and open issue at the ui-select GitHub page. In my case, I am using ngAnimate and the multi-select feature.

Answer 2

Try below code ...

<ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" 
theme="bootstrap"  sortable="true" close-on-select="false" style="width: 
 800px;">
 <ui-select-match placeholder="Select person...">{{$item.name}} &lt;
 {{$item.email}}&gt;</ui-select-match>
 <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: 
  $select.search, age: $select.search}">
  <div ng-bind="''+person.age | highlight: $select.search | highlight: 
  $select.search"></div>
  </ui-select-choices>
 </ui-select>

For your reference : https://codepen.io/mfunkie/pen/bKAaI