ui-select broken with angular 1.5.0 beta2

[LeleDev]

Ui-select doesn't work with latest angularjs updates

[CrlsMrls]

Is this related with #1128?

[LeleDev]

It seems not

[crissdev]

In what is it broken? Updating the examples to use 1.4.8 seem to work just fine. Since I intend to use this in a production environment it would be very helpful if anyone can provide more info. Thanks.

http://plnkr.co/edit/4EsCcN8z3OZKYM1qjp84?p=preview
http://plnkr.co/edit/sFPmLg13rXqMuRLI7jqh?p=preview

[LeleDev]

Ok you are right, with 1.4.8 is working, only with 1.5.0 beta2 I get the following error:

Error: [ui.select:transcluded] http://errors.angularjs.org/1.5.0-beta.2/ui.select/transcluded?p0=Expected%201%20.ui-select-match%20but%20got%20'%7B0%7D'.&p1=0
    at http://localhost:9001/src/app/app_files/bower_components/ui-select/dist/select.js:119:12
    at http://localhost:9001/src/app/app_files/bower_components/ui-select/dist/select.js:972:19
    at http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:55:319
    at http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:60:159
    at O.d (http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:57:164)
    at k (http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:62:248)
    at http://localhost:9001/src/app/app_files/bower_components/ui-select/dist/select.js:960:9
    at ea (http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:76:209)
    at w (http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:64:64)
    at http://localhost:9001/src/app/app_files/bower_components/angular/angular.min.js:72:176

The problem if you use this library for production is that it seems to have been quite abandoned from the maintaners... I regret to have chosen this library for my project due to the lack of support (that's why also I'm lazy to report broken stuff in the proper way, since nobody seems to really care about it)

[crissdev]

@LeleDev Thanks for your feedback. I hope to find some good alternatives without messing around with $apply. Please let me know if you know about some of them :-)

[LeleDev]

You could give a try to the old ui-select directive repository code (when it was a wrapper for the nice select2 library: https://github.com/select2/select2) at this page: https://github.com/angular-ui/ui-select2/blob/master/src/select2.js

Unluckily there aren't many good alternative to ui-select that work out of the box... so I'm afraid that you will have to gamble and stick to this one, hoping that some new maintainers will be assigned to the project from the angular-ui team...

[nickmorton]

It seems to have been caused by this change for 1.5.0-beta.1 Lazily compile the transclude function

You can prove it by setting eager=true in the debugger.

[llafuente]

Moderator note:

This workaround should no longer be required in ui-select v0.14.3+

---

The workaround is really simple.

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

See the diff @ inetsys/ng-formalizer@e186302

[nickmorton]

Nice one! Works for me.

[Luddinus]

@llafuente It works, but WHY?

[Luddinus]

Select2 theme does not works (it does not show the search icon etc.)

[bogdanalexe90]

I have the same problem with angular-1.5.0-rc.0 I opened an issue for them here:
angular/angular.js#13527

[steambros]

@llafuente Thanks for the easy workaround. Works for me with angular-1.5.0-rc.0.

[brunolimawd]

Thanks @llafuente, Works for me with AngularJS v1.5.0-rc.0 👍

[amantilas]

Hi, just checking if there are any plans to resolve within ui-select without using the work-around described above, as the Angular issue has been moved to the Ice Box.

[kurtommy]

@llafuente Thanks for the easy/crazy workaround. Works for me with angular-1.5.0-rc.0.

[valterkraemer]

Had difficulties getting bootstrap theme to work with angular-1.5.0-rc.0 . Finally got it.

Here's a working Plunker if others still have problems.

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

[chrisvel]

+1 here

[CesarLanderos]

this is still happening in the 1.5.0 release :(

[ConcurrentHashMap]

The workaround from @llafuente still works with the 1.5.0. Thanks for sharing!

[avgalon]

Thanks man, works great with 1.5.
Can you please share on why exactly it works?

[hut8]

@avgalon it works because part of the compilation process takes elements called ui-select-match (and other ui-select-*) and applies the class="ui-select-*" attributes (among lots of other things). In this case, that part of the transclusion happens after the part that looks for elements with those classes, which of course is wrong. So this isn't a bad workaround at all, I don't think.

I had been debugging this last night and I thought it was because I had moved these into templates that were loaded asynchronously (there are other bugs in this project for the same thing which give the same error message). Then I realized that I had upgraded my Angular version as well (to 1.5.0), which is actually what caused it. So I can confirm this also works on 1.5.0.

[misaizdaleka]

I'm trying to override select directives so that these classes are automatically added as a part of the compilation process, rather than me adding all the classes manually in the html. No luck for the time being :(

[bubenshchykov]

@llafuente thanks a lot, this little magic worked :)
@hut8 thanks for explaining the magic!

[misaizdaleka]

Here's my fix so that you don't have to manually add classes everywhere, since this will add them automatically.

angular.module('ui.select').config(function($provide) {
    $provide.decorator('uiSelectChoicesDirective', function($delegate) {
        var directive = $delegate[0];

        var templateUrl = directive.templateUrl;

        directive.templateUrl = function(tElement) {
            tElement.addClass('ui-select-choices');
            return templateUrl(tElement);
        };

        return $delegate;
    });

    $provide.decorator('uiSelectMatchDirective', function($delegate) {
        var directive = $delegate[0];

        var templateUrl = directive.templateUrl;

        directive.templateUrl = function(tElement) {
            tElement.addClass('ui-select-match')
            return templateUrl(tElement);
        };

        return $delegate;
    });
});

[Narretz]

Um, setting a class on an element is a workaround, not a fix. The problem is that ui-select reaches into the transcluded content before it has been compiled. It should instead wait until the transcluded content is ready. The children should require the ui-select directive and call a function in the ui-select controller when they have been linked successfully. At least that's how I would do it.

[dviramontes]

The diff by @llafuente solved it in my case.
Using ui-select 0.13.3
and angular 1.5.0

[earivasz]

@llafuente Thanks for the solution works for me with angular 1.5.0.

[joshjwalker]

@misaizdaleka where did you put that to get it to work? I have a ton of selects throughout a platform I'm working on, and adding classes is unreasonable

[ipavlyk]

@llafuente, I spent a lot of time searching for solution and got nothing. But your post save a lot of my time. Thx a lot, man)

[misaizdaleka]

@joshjwalker just put in your main js file. In my case, it was app.js.

[aaronroberson]

The fix has been published in v0.14.3.

[chrisfosterelli]

Thanks @aaronroberson and @Narretz!

[danielolivaresd]

@llafuente Thanks for the solution! It works for me with angular 1.5.0.

[Just-Rookie]

@llafuente Thanks, it works for me with Angualr 1.5.0. But I want to know why it works when I add the class to ui-select-match and ui-select-choices with the same name. can you tell me ? Thanks a lot!

[user378230]

llafuente Thanks, it works for me with Angualr 1.5.0. But I want to know why it works when I add the class to ui-select-match and ui-select-choices with the same name. can you tell me ? Thanks a lot!

@Just-Rookie Its a workaround not a solution (the solution is update to ui-select > v0.14.3)

See PR #1430 for details on why adding classes work.

[Just-Rookie]

@user378230 Thanks!

[crissdev]

In case someone really knows what the heck I'm doing wrong please share...This does not work.

ui-select.form-control(multiple ng-model="searchFilters.someProperty")
  ui-select-match(placeholder="{{::'Choose...' | translate}}") {{$item.text | translate}}
  ui-select-choices(repeat="filterOption.value as filterOption in searchFilters.someList track by filterOption.value")
    span {{filterOption.text | translate}}

someList is an array like [{value: 'xxxx', text: 'xxxxx'}]
searchFilters.someProperty is an array.
translate directive is from angular-gettext

All I get is Syntax Error: Token 'track' is an unexpected token at column 31 of the expression....

Thx

[Narretz]

@crissdev posting in closed issues is not the best way to get attention to your issue

[heridev]

you're right not so cool writing on closed issues.

but any of the solutions included in this thread worked for me :(, so I ended up downgrading the ui-select2 version:

Installing rails-assets-angular-ui-select 0.13.0 (was 0.14.2)

and it's working now

[user378230]

@heridev did you see my reply? #1325 (comment)

[RichardPinheiro]

@llafuente nice work my friend! very simple!

[gop-aroy]

Thank you @llafuente

[bala2e]

Hi All,
Kindly check this solution https://github.com/angular-ui/ui-select/issues/1467 too