Getting Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'.

[DineshkumarT]

I have used the following snippet to create the dropdown
ui-select ng-model="option.name" theme="select2" ng-disabled="disabled" style="width: 100%">
ui-select-match placeholder="Select">{{$select.selected.name || $select.selected}}
/ui-select-match>
ui-select-choices repeat="option in options.options | filter: $select.search">
div ng-bind-html="options.name | highlight: $select.search">
/ui-select-choices>
/ui-select>

But I am facing the error
Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'.

Referenced the plunker http://plnkr.co/edit/1D614lgGZmRkff9jG2GR?p=preview to develop.

Help me out -

-Dinesh

[a-reznic]

pls help

[dimirc]

I opened the plunker to refer to, but works ok. Can you tell me how to reproduce that error?

[NewMediaRoc]

I have the same issue . My use-case is that I'm attempting to include the match and choices via a second directive, similar to this: http://plnkr.co/edit/9IZ0aW?p=preview
(Note: it works in this plnkr because it's using an older version of ui-select).

[a-reznic]

v1.2.26 all is ok

[brunopaz]

with angular > 1.3 the problem is back again

[dimirc]

@brunopaz I updated plunker for v1.3.1 and its working, how can I reproduce your error?

[sime]

I get this error when I am trying to use a custom (Bootstrap based) theme.
If select-multiple.tpl.html arrives before choices.tpl.html or match-multiple.tpl.html the above error occurs.

Is it possible to wrap the template calls into a single promise?

[mattsharpe]

+1
I can see the same happening. I turned on fiddler and sure enough when select-multiple.tpl.html is the first template returned the error occurs.

[sime]

I have found it quite easy to reproduce the select-multiple.tpl.html compiling early in this plunker:

http://plnkr.co/edit/THkOHjK59vS9XlMRRdmf?p=preview

[sime]

My workaround is to cache the templates myself inside of a $q.all(). Then in the markup I use a ngIf on uiSelectTemplateReady to display the directives. Not sure if this is optimal, but after a few minutes of testing it seems to work.

var templatePath = uiSelectConfig.theme;
$scope.uiSelectTemplateReady = false;
$q.all([
    $http.get(templatePath + '/choices.tpl.html', {cache: $templateCache}),
    $http.get(templatePath + '/match-multiple.tpl.html', {cache: $templateCache}),
    $http.get(templatePath + '/select-multiple.tpl.html', {cache: $templateCache})
])
.then(function (res) {
    $scope.uiSelectTemplateReady = true;
    return res;
});

[noelking]

This looks like a race issue here that occurs, particularly on first load and I have been trying to get to the bottom of it with no joy so far. Unfortunately none of the templateCache solutions mentioned have really worked. I can see the problem comes down to the number of transcludedMatch.length in this line of code "if (transcludedMatch.length !== 1) {" especially as ui-select-match is being used

<ui-select ng-model="gender.selected" title="Gender" class="form-control cp-select" >
                                    <ui-select-choices repeat="gender in genders | filter: $select.search">
                                        <div  ng-bind-html="gender | highlight: $select.search"></div>
                                    </ui-select-choices>
                                    <ui-select-match class="cp-select-question" placeholder="Gender"><span class="cp-select-question">{{$select.selected}}</span></ui-select-match>
                                </ui-select>

It does not happen everytime, but if I test with private or incognito browsing its easier to reproduce. I am using the latest version of select-ui and angular 1.3.15

Any help here would be really appreciated.

Thanks

[melloc01]

👍 same here, ui-select works but it show same errors.

I'm also using another directive to compile ui-select html templates.

[arteme]

I am using the work-around posted by @sime just extended to all ui-select templates:

        $scope.uiSelectTemplateReady = false;
        var base = '...';
        $q.all([
            $http.get(base + '/choices.tpl.html', {cache: $templateCache}),
            $http.get(base + '/match.tpl.html', {cache: $templateCache}),
            $http.get(base + '/select.tpl.html', {cache: $templateCache}),
            $http.get(base + '/match-multiple.tpl.html', {cache: $templateCache}),
            $http.get(base + '/select-multiple.tpl.html', {cache: $templateCache})
        ])
        .then(function (res) {
            $scope.uiSelectTemplateReady = true;
            return res;
        });

[claeyst]

I'm having the same issue here

[martinoss]

I tried the same as @arteme and @sime but this did not solve the problem for me. I made sure, that all templates had been loaded using the resolve feature ui-router. Additionally, I made the templates load one by one in the "correct order" (match, choices, select) for testing purposes. Same issues.

So far, the only workaround that resolves the issue for me was adding all templates using a script tag to my document as @nasturah described here.

[SajjadGit]

@nasturah thanks for your workaround solution.

I can able to append DOM elements inside ui-select templates.

But i am facing one issue when i am trying to invoke function which is binded to element

Ex: i added two DOM elements to select2/choice tmp and binded with ng-click and methods are defined inside controller.

<span ng-click="add()">Add</span> 
    <span ng-click="delete()">Edit</span> 

see below tmpl..

<script type="text/ng-template" id="select2/choices.tpl.html">
    <ul class="ui-select-choices ui-select-choices-content select2-results">
    <li class="ui-select-choices-group" 
    ng-class="{'select2-result-with-children': $select.choiceGrouped($group) }">
    <div ng-show="$select.choiceGrouped($group)" class="ui-select-choices-group-label select2-result-label" ng-bind="$group.name"></div>
    <ul role="listbox" id="ui-select-choices-{{ $select.generatedId }}" ng-class="{'select2-result-sub': $select.choiceGrouped($group), 'select2-result-single': !$select.choiceGrouped($group) }">
    <li role="option" id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}">
    <div class="select2-result-label ui-select-choices-row-inner"></div>
    </li>    </ul>    </li>    <li>
    <span ng-click="add()">Add</span> 
    <span ng-click="delete()">Edit</span> 
    </li>
  </ul>
</script>

the ng-click with methods add() & delete() fires twice :(

[axos88]

Any traction on fixing this?

[stanleyxu2005]

I am also facing the same issue. It is 100% reproducible on my environment. The issue only happens when I use a mobile device (e.g. iPhone/iPad) or Chrome's mobile emulation view.

When I debug deeper, it seems

    if (choices.length < 1) {
      throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length);
    }

The length of the choices is 0.

After further digging, I noticed that it happens when ngTouch is enabled. If I disable ngTouch, the problem will be gone. This is caused by unexpected ngclick handling of ngTouch. In Angular 1.5, this behavior will be fixed by default.

[bubenshchykov]

same error with 1.5.0

[giacomolm]

@bubenshchykov +1

[kvspb]

+1

[akholodenko]

+1

[akholodenko]

Temporary fix mentioned here: #1325 by @llafuente

"Add class to ui-select-match and ui-select-choices with the same name"

[oharlem]

+1

[rubinsh]

+1

[hitigon]

have the error sometimes with 1.4.8

[dbmuller]

@jziggas tried that but seems to be different for my problem.

I experienced the same as @ftorghele

g.attr("ng-repeat", r.parserResult.repeatExpression(u)), // .attr("ng-if", "$select.open"), // Hack to fix

Problem gone, but performance is significantly worse on larger lists (257 rows), no problem on small lists.

This happen when I upgraded to:
ui-select 0.16.0
AngularJS v1.5.3

Previously on
ui-select 0.9.6
AngularJS v1.4.8

my HTML in question

`

<ui-select-match placeholder="{{language.State}}">{{$select.selected.StateName}}</ui-select-match>

<ui-select-choices repeat="item.StateID as item in State | dropdownFilter: {StateName: $select.search, Country: {CountryName: $select.search}}">
    <span ng-bind-html="item.StateName | highlight: $select.search"></span><br />
    <small>
        <span ng-bind-html="''+item.Country.CountryName | highlight: $select.search"></span>
    </small>
</ui-select-choices>

`

EDIT:
More on this. I rolled back the hack, then disabled the select2 theme and used bootstrap instead and the problem goes away. Then I used select2 again, and it worked. Must have been cache related? What remains strange is that I did this in IE, and when I go back to Chrome (which also had the problem and wasn't used during the fixing) it works again too :/

[marcondesdddi]

Resolved

http://a10i.me/ui-select-broken-angular-1.5

[ebuildy]

It's clearly not compatible with angular 1.5, just opened the demo Plunker, replace angular 1.2.6 by angular 1.5 then get the same error ....

http://plnkr.co/edit/wGniqjTA8KTc6uWG2uxr?p=preview

The demo is working fine until angular 1.4.8.

[marcbachmann]

It's clearly not compatible with angular 1.5, just opened the demo Plunker, replace angular 1.2.6 by angular 1.5 then get the same error ....

@ebuildy where did you get that select.js in http://plnkr.co/edit/wGniqjTA8KTc6uWG2uxr?p=preview from? It has version 0.11.2 which is over a year old.

We had to switch from the npm module angular-ui-select to ui-select to get it to work. We're running on angular 1.5.3 now.

[ebuildy]

Actually, even with version 0.17.1, I see the error if I omit:

    <ui-select-match>
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>

This was my problem.... sorry for trouble

[rohankvats]

@marcbachmann Updating angular-ui-select: ^0.17.1 solved it for me. Thanks.

[SincereJ]

@rasenplanscher , thanks . it's works .

[refaelos]

@rasenplanscher I'm still getting this error on angular 1.5.6 and angular-ui-select 0.18.0.

Here's my code:

    <ui-select ng-change="onChange()" theme="bootstrap" search-enabled="true" ng-model="$parent.value">
        <ui-select-match class="ui-select-match">
            <span ng-bind="$select.selected[listTitle]"></span>
        </ui-select-match>
        <ui-select-choices class="ui-select-choices" repeat="v[listValue] as v in list | filter: $select.search track by v[listTitle]">
            <span ng-bind="v[listTitle]"></span>
        </ui-select-choices>
    </ui-select>

Can you please tell me what's wrong with it?

UPDATE

I found out that for transcluded from this code:

var transcludedMatch = transcluded.querySelectorAll('.ui-select-match');

transcluded[0] is <div></div>

Not sure how this happens.

UPDATE 2
The line before that is:

var transcluded = angular.element('<div>').append(clone);

For some reason, clone is []. Any idea why?

[c-vetter]

@refaelos
Actually, I'm not using this at the moment, so I cannot easily take a deep look. That being said, I don't see a reason why you should get this error – looks ok to me. Sorry that I cannot help you right now. In your place, I'd debug the whole setup proces start to finish to see where unexpected behaviour starts; just edit the ui-select files in node_modules ;)

An additional note: you do not need the "ui-select-match" class since 0.14.3

[refaelos]

@rasenplanscher thanks. I'll get it fixed.

[waliurjs]

This couple seems to be happy! 😍

"angular": "1.5.6",
"angular-ui-select": "~0.18.1",

[mattjanssen]

Running Anguler 1.5 and angular-ui-select 0.19.1. Here's my CSS fix:

.ui-select-toggle > .caret { pointer-events: none }

[cabloo]

Note for those using npm to install ui-select, use ui-select, not angular-ui-select which is an out of date replica that has this bug in Angular 1.5+.

[abobwhite]

I am seeing the same as @rasenplanscher . var transcluded = angular.element('<div>').append(clone); is returning an array of elements with length 1. It looks just like jQuery syntax where if we just use transcluded[0]..querySelectorAll(...) it would work fine. I don't see anything about my usage that looks suspicious, though.

Using Angular 1.5.8 and UI-Select 0.19.6

EDIT: I also use jQuery, however, I completely removed it and the same thing is happening with jQLite. Somehow the monkey-patching of angular.element isn't working here:

if (angular.element.prototype.querySelectorAll === undefined) {
  angular.element.prototype.querySelectorAll = function(selector) {
    return angular.element(this[0].querySelectorAll(selector));
  };
}

[abobwhite]

As it turns out, this issue was actually webpack related. I needed to provide the select.js file the angular module that I was using.

I added this loader:

{
    test: /node_modules[\/\\]ui-select[\/\\]dist[\/\\].*\.js$/,
    loader: 'imports?angular=angular'
}

[yasongxu]

I also had this problem when i use ui-select.js 0.11.2 ,and i upgrade the latest version(0.19.5), it's solved

[refaelos]

@abobwhite when I added what you said, I got this:

ERROR in ../~/ui-select/index.js
Module not found: Error: Can't resolve 'imports' in '/Users/refaelos/work/soomla/servers/tb-dashboard/server'
 @ ../~/ui-select/index.js 1:0-27
 @ ../client/app/app.js
 @ multi app

Any idea why?

[abobwhite]

@refaelos You probably need the webpack imports-loader installed.

@vermouth1994 That's probably because ui-select didn't have module support until something like 0.14.x....so it definitely wouldn't have worked before that.

[refaelos]

@abobwhite perfect. Thanks!

[AbdallahyDev]

I have this message error: "Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'" with angular 1.5.
But, by adding class="ui-select-match" and class="ui-select-choices" in my html code, it works well source here

[hoangthau]

@rasenplanscher
Add class it works fine.
thank you

[shanoy]

Still happening with SELECTIVE theme and angular > 1.5

[mavrick]

Still getting this with selectize theme
ui-select 0.19.8
angular 1.6.4

FYI: Using bootstrap theme works

[pingping1122]

ui-select-match and ui-select-choices add class tag is ok

[tvStatic]

This issue manifests if a multi-select ui-select element is created after the first one is loaded.

See http://plnkr.co/edit/S5umhcrVW71T2LAYcCv8?p=preview

Clicking the add button creates new ui-select elements via ng-repeat directives in the parent elements. For single-select, there is no problem, but the error message appears every time the Add button is clicked for the multi-select.

Adding ui-select-match and ui-select-choices classes in the respective elements did not appear to make any difference - this is included in the plunker.

[carlosafonso]

Can confirm this is happening to us.

We're developing a custom directive which wraps a ui-select and passes user-defined attributes to the ui-select element via $compile(), and this error pops up every time.

Using Angular 1.4.14 and angular-ui-select 0.19.8.

[himynameistimli]

@tvStatic did you ever find a solution? I'm having the same problem in the same scenario.