ui-select Error: [ui.select:choices] Expected multiple .ui-select-choices-row but got '0'.

Hey,

I am getting this error message Error: [ui.select:choices] Expected multiple .ui-select-choices-row but got '0'. when I select item from drop down list. (ui-select 0.14.9 (even 0.14.0), angular 1.5.0 or angular 1.4.9). Basically since 0.14.0 with both angular 1.4.x or 1.5.0.

Error: [ui.select:choices] http://errors.angularjs.org/1.5.0/ui.select/choices?p0=Expected%20multiple%20.ui-select-choices-row%20but%20got%20'%7B0%7D'.&p1=0
    at select.js:125
    at _ensureHighlightVisible (select.js:853)
    at ctrl.focusSearchInput (select.js:405)
    at select.js:389
    at angular.js:18744
    at e (angular.js:5804)
    at angular.js:6081

It gets generated instant many times after I select..

Also other effect is that I cannot scroll immediately.. It gets stuck for about 2s (200 items) and then it allows me to scroll/select and is smooth again.

My setup (does the same without classes):

<ui-select multiple ng-model="maintenance.devices">
    <ui-select-match class="ui-select-match" placeholder="select device...">
        {{$item.hostname}}
    </ui-select-match>
    <ui-select-choices class="ui-select-choices" repeat="ne in networkElements | filter: $select.search">
        <div ng-bind-html="ne.hostname | highlight: $select.search"></div>
        <div ng-bind-html="ne.ip | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

So far working configuration for me was only ui-select 0.13.2 and Angular 1.4.9 without classes specified:

<ui-select multiple ng-model="maintenance.devices">
    <ui-select-match placeholder="select devices...">{{$item.hostname}}</ui-select-match>
    <ui-select-choices repeat="ne in networkElements | filter:$select.search">
        <span ng-bind-html="ne.hostname | highlight:$select.search"></span>
        <span ng-bind-html="ne.ip | highlight:$select.search"></span>
    </ui-select-choices>
</ui-select>

No issues with scrolling and (list load) lag either. Smooth right after the page refresh.

Any inputs will help me. Thanks, Michal

Feb 29 '16 18:02 aronmgv

Can you provide a reproduction plunkr with the latest version of ui-select?

Feb 29 '16 22:02 user378230

@MacGyver27 Do you have ngAnimate in your project? I had a similar error when ngAnimate is present, removing the module or deactivating it for the select item should fix the error.

Mar 01 '16 08:03 spadou

@SamuelPadou That was it! ngAnimate is causing this problem with latest ui-select. Thank you for this input. Either not including ngAnimate to your project or disabling it in your controller works for now..

Plunkr: https://plnkr.co/edit/ITCtDdiC5U4H7WAFm2Dz?p=preview

Mar 01 '16 16:03 aronmgv

got exact same error, ngAnimate is not even installed

Mar 09 '16 14:03 Silur

The issue occurs when I'm not giving the ui-select-choices directive a class of "ui-select-choices" and the ui-select-match directive a class of "ui-select-match". Adding those classes fixes the issue.

Any other workaround though?

Mar 11 '16 18:03 AbdallaElabd

But... what if i'm using ng-animate?

Mar 12 '16 01:03 loucho

I think the code in "ctrl.activate" function, which checks if animation finished, should also check that the drop-down is opened; this error is obtained as the '.ui-select-choices-row' controls are not found (as the drop-down is already closed).

Below is the modified code (in uiSelectController.js -> ctrl.activate function; added the && ctrl.open part in if statement) which works for me (i.e. I am no longer seeing the error message "Expected multiple .ui-select-choices-row but got '{0}'.") // check that drop-down is opened before calling focus function if (phase === 'close' && ctrl.open) { // Only focus input after the animation has finished $timeout(function () { ctrl.focusSearchInput(initSearchValue); }); }

Mar 15 '16 10:03 Joanne16

+1. Also having this issue when calling toggle() on the ui-select. Edit: Also calling activate() may have the same issue as activate() will be invoked on condition in toggle().

Versions: Angular-ui-select: v0.15.0 Angular: v1.3.15

It appears that calling toggle() is causing the following to happen:

Invoking ctrl.focusSearchInput()
Which calls the private function _ensureHighlightVisible()

This leads to choices < 1 so it throws an error.

Edit: I've deduced that this is a race case happening with list items being loaded when a modal is shown. I've fixed this by waiting till the end of the execution cycle to invoke toggle() (or activate()) on the ui-select element. This solved the issue.