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">

[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)

[sime]

Can I suggest that adding +1 doesn't help to the development of this issue.

[novoxd]

+1 (angular 1.5.0)

[alo]

+1 (angular 1.5.0)

[DURK]

It seems the issue has been fixed on master, but the dist folder has not been updated. As I (and probably most of you) am using bower to install ui-select, this prevents me from applying the fix. Could someone update the dist build or better yet create a new version?

[giacomolm]

@akholodenko 's suggestion fixed my problem with ui-select (1.5.0)

[brmcerqueira]

+1 (angular 1.5.0)

[iberodev]

the suggestion to add a class with the same name does not work for me. I'm using bootstrap theme. How come the workaround works only for somebody?

<ui-select ng-model="reg.model.countryCode" theme="bootstrap">
    <ui-select-match placeholder="Select a country..." class="whatever">
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices class="whatever" repeat="item.code as item in (reg.countries | filter: $select.search) track by item.code">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
</ui-select>

These are my versions in case anybody see a conflict. But I'm afraid I will have to downgrade to 1.4.9 for now

    "angular": "^1.5.0",
    "angular-bootstrap": "^1.1.2",
    "angular-cookies": "^1.5.0",
    "angular-mocks": "^1.5.0",
    "angular-route": "^1.5.0",
    "angular-animate": "^1.5.0",
    "angular-sanitize": "^1.5.0",
    "angular-ui-router": "^0.2.18",
    "angular-ui-select": "~0.14.2",
    "angular-toastr": "^1.7.0",
    "ag-grid": "^3.2.2",
    "bootstrap": "~3.3.6",
    "bootstrap-sass-official": "~3.3.6",
    "font-awesome": "~4.5.0",
    "Hover": "~2.0.2",
    "oidc-token-manager": "^1.0.1",
    "restangular": "^1.5.1",
    "lodash": "1.3.0"

[novoxd]

@realavaloro I have the same fing with same class names. +1

[hugobessa]

+1 (angular 1.5.0)

[grantfeldman]

+1 (angular 1.5.0)

[c-vetter]

+1 (angular 1.5.0)

[c-vetter]

@realavaloro and @novoxudonoser Your class names need to match the respective elements, like so:

<ui-select ng-model="reg.model.countryCode" theme="bootstrap">
    <ui-select-match placeholder="Select a country..." class="ui-select-match">
        <span ng-bind="$select.selected.name"></span>
    </ui-select-match>
    <ui-select-choices class="ui-select-choices" repeat="item.code as item in (reg.countries | filter: $select.search) track by item.code">
        <span ng-bind="item.name"></span>
    </ui-select-choices>
</ui-select>

[user378230]

Is this not resolved by #1430 or is this a separate issue?

Please include the version number of ui-select you are using when +1'ing...

[cristianhoyos66-zz]

I solved this getting back angular 1.5.0 to 1.4.8

[c-vetter]

@user378230 Yes, that does solve the issue. Thank you for pointing that out! Therefore this ticket can be closed now.

@cristianhoyos66 That's not really a progressive option, now is it? Also, see @user378230's answer right before yours...

[mstmustisnt]

@rasenplanscher thank you guy you've saved my life!!

adding classes solved for me

[c-vetter]

@mstmustisnt You're very welcome.

@all As @user378230 pointed out, this is fixed by #1430 – that means: by updating to v0.14.3 or above, the classes-workaround is not necessary anymore. So, use the workaround only if you cannot update at this point.

[marcoaacoliveira]

+1 (angular 1.5.0 - ui-select ~0.9.6)

[user378230]

@marcoantoniooliveira the fix was included in ui-select v0.14.3+... see @rasenplanscher comment.

[diegolmello]

Updating to 0.14.9 worked for me. Thanks!