ui-select modifying ng-model object

[ilanbiala]

With this snippet:

<div class="form-group">
            <label for="users" class="col-sm-3 control-label">Users</label>
            <div class="col-sm-8">
                <ui-select multiple search-enabled ng-model="editingDesk.users" on-remove="editingDesk.removedUsers.has($item) ? editingDesk.removedUsers.delete($item) : editingDesk.removedUsers.add($item)" on-select="editingDesk.newUsers.has($item) ? editingDesk.newUsers.delete($item) : editingDesk.newUsers.add($item)">
                    <ui-select-match placeholder="Select users...">{{$item.userName}}</ui-select-match>
                    <ui-select-choices repeat="user in users | filter: $select.search">
                        {{user.userName}}
                    </ui-select-choices>
                </ui-select>
            </div>
        </div>

When the controller instantiates, editingDesk.users is properly populated. Once the controller finishes instantiating, editingDesk.users.length is 0. If I comment out the HTML above, then I don't have this issue.

[brianfeister]

My only thought is that it would relate to the changes to on-remove and / or on-select, added here: 83e8282. But that is not yet released and is after the latest tag. Did you copy the code directly from source or install via bower?

[ilanbiala]

I went into the dist folder and downloaded select.min.js since I'm not using Bower. The commit code you linked only runs when the ui-select is updated somehow, but this issue comes up before anything has happened.

[brianfeister]

You'll need to post an example of it not working correctly via something like http://plnkr.co

[ilanbiala]

http://plnkr.co/edit/sJEQrTeEgDUs8Ca0sdne?p=preview has a demo, but ui-select is either broken or plunker is broken because there are errors in the console that I don't see in my project. I double checked my code and I'm almost positive I'm not modifying the variable after the controller instantiates, is there anything else you can think of?

[divan]

I got the same issue here. ui-select installed via bower.

I found that problem occurs when the model contains objects different from the ui-select-choices source. I.e. when editingDesk.users == [$users[0],$users[1]], it will work, but if editingDesk.users == [user1, user2] - it will clear editingDesk.users (assuming user1 and user2 are of the same type as $users[0], of course).

Here is plunker demo: http://plnkr.co/edit/62RgP0cLCsbqWl9QBurc?p=preview . Uncomment last lines in demo.js to see the difference.

[ilanbiala]

@brianfeister any thoughts on how we can fix this?

[benitogf]

hello I used this and its working now, here is an example http://plnkr.co/edit/NJ21xltT1ABCgWmhuaDo?p=preview

[brianfeister]

@b3n0n - thank you! Sorry to everyone else, I just haven't had the time to look into this. Does @b3n0n's code help?

[ilanbiala]

@brianfeister Not sure if I'm putting in the wrong place or @b3n0n is using an old version, but with the latest select.js from the dist folder and his change made, it doesn't seem to fix the issue.

[benitogf]

It seems to work only for static lists, I was trying to do this but still no luck 😄

[ilanbiala]

Yeah this needs a proper solution @brianfeister. Take a look at #410 or #405 and a few others.

[brianfeister]

Thanks for helping this along @ilanbiala and @b3n0n. I've implemented the change advised in the referenced PR's #410 & #405 in this plunkr. Unfortunately, it doesn't fix the issue. The code has moved alot since the PR's were opened, sorry to say. I'm watching this thread - if someone were to make the Plunkr work and post a code snippet, I could get a fix committed and merge it but I'm under an extreme deadline for a few weeks at work so I'll be unlikely to debug it myself during that window.

[ilanbiala]

@brianfeister could it be because i'm using an ES6 Set?

[brianfeister]

That could definitely be the cause, I doubt angular.equals supports ES6 collections. Perhaps you could pre-compile with Traceur: http://arv.github.io/ngeurope/#/25.