UI-select with e-multiple sets value to null when using limitTo in repeat

[stefanvanherwijnen]

When I use editable-ui-select with the e-multiple option and limitTo to limit the number of options, some of the selected objects are set to null after selecting/deselecting a few times.

For example in this jsfiddle: http://jsfiddle.net/psvbguhk/2/ Select 555, save, then select 444 and the third selection (which should be 555) is set to null.

It only seems to happen with values above the value set for the limitTo function. The easy workaround is ofcourse to not use limitTo, but how do I limit the number of options shown in tht case for large sources (1000+ items)?

[ckosloski]

This might be an issue with ui-select. I noticed you don't have the latest version in your plunker. I did find this, which seems similar: https://github.com/angular-ui/ui-select/issues/1486

Looking at a comment here, seems to me this is a ui-select issue - https://github.com/angular-ui/ui-select/issues/88

Also a problem for me. I can't do the limitTo: 'myNumber' trick because it doesn't allow previously selected items to be pre-populated unless they're within the first 'myNumber' of my source.

[stefanvanherwijnen]

You are probably right. I had been struggling with the problem for a few days, but upon writing this issue I realized it was related to the limitTo option. It seems to be a known problem with ui-select. I finally managed to find a workaround. The problem seems to be that ui-select requires the selected items to be present in the list of items. limitTo reduces the array to a certain length which will remove the selected items from that array. I created a custom filter which searches for the right items but also includes the selected items in the array. The following code will include the selected items (I stripped out the rest of the code):

app.filter('search', function () {
  return function (items, search, selectedItems) {
    var matches = [];
    angular.forEach(items, function (item) {
      if (selectedItems.indexOf(item.value.id) !== -1) {
        matches.push(item);
        return;
      }
    }, this);
    return matches;
  }
});

I noticed there is a pull request for ui-select to include a "limit" attribute which might solve this problem, but I haven't tried it.

[ckosloski]

Thanks for sharing your work around.