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]

:+1: 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: https://github.com/angular-ui/ui-select/issues/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

[asprotte]

@akholodenko 's suggestion fixed the issue for me

[stanleyxu2005]

@asprotte @akholodenko 's fix will have tiny visual difference to previous versions. When dropdown menu is shown, the edge of edit control and dropdown menu have 2px radius border. I can 100% reproduce it when I use "select2" theme.

[ganqqwerty]

+1 for angular 1.5.0

[sebelga]

+1 (angular 1.5.0)