Performance issues

[filipedeschamps]

Guys, we are suffering some serious performance issues. Does anyone know what is this $select.isActive(this) ?

[dimirc]

I can't find it, can you upload an example or point where on the src its used?

[dimirc]

Seams like this is related to #49 code

[DKirwan]

Having the same issue. The batarang chrome developer tools extension (https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en) exposes this issue. Removing the code that highlights the list item that you're hovering over improves performance noticeably, but it is still very slow. Doesn't appear to be related to #49.

See line 903 in dist/select.js for more info.

$templateCache.put("selectize/choices.tpl.html","<div ng-show=\"$select.open\" class=\"ui-select-choices selectize-dropdown single\"><div class=\"ui-select-choices-content selectize-dropdown-content\"><div class=\"ui-select-choices-group optgroup\"><div ng-show=\"$select.isGrouped\" class=\"ui-select-choices-group-label optgroup-header\">{{$group.name}}</div><div class=\"ui-select-choices-row\" ng-class=\"{active: $select.isActive(this)}\"><div class=\"option ui-select-choices-row-inner\" data-selectable=\"\"></div></div></div></div></div>");

[askhogan]

I saw the same thing in my app. I removed the isActive component and still have the same performance problem. It seems that if you load more than 10 ui select directives on the same page, the page becomes frozen for 5-6 seconds. I am using Mac OSX with the latest version of chrome.

I believe the performance issues are due to the ng-repeat mechanism in the ui-select-choices directive. I commented out this section of the code and the app became responsive again. It appears that the select dropdown list of choices is getting processed immediately, instead of when it is clicked on. If you have (several choices * several select-ui search boxes) on the same page it will slow down page load tremendously. I believe the solution is to delay the processing of the dropdown choices until a select-ui search box is clicked on, but I am still investigating...

The project I am using this with has one ui-select box per user. For large accounts with 50-150 users, loading can take about 15 - 30 seconds or cause chrome page to crash.

[jurintalu]

Any update on this? Same performance issues here aswell.

[askhogan]

This is not a permanent fix, but what I did was created a ng:if where I disabled the angular ui-select if the object was empty (e.g. no options selected). So for the directive to render a user must press on a button and then the UI renders. This prevents about 80% of the ui-selects from rendering on page for me and solved the problem.

My case is multi-select just to be clear.

Here is some sample code

<ui-select ng:if="user.hasExtensions"
///
</ui-select>   
                      <span ng:if="!user.hasExtensions"
                               ng:click="user.hasExtensions = true; refreshPlaceholder();"
                               class="btn-info-callinize"><i
                                     class='icon-plus-sign icon-white'></i></span>

[jurintalu]

Thanks but I have only one ui-select with roughly a thousand options. On IE9 it is pretty much unusable.

[gjoliver]

yeah guys, this is really bad.
I have only 1 select with maybe 500 entries. And it's super slow.
any idea where the problem may be?

[gjoliver]

ok I worked around this by doing repeat="...... | limitTo: 100", so we don't show a huge list of items.

[oaprograms]

@gjoliver
limitTo solves the speed issue, but it would be even nicer if remaining items could be appended automatically when the list is scrolled to bottom.

[rogerfar]

Any update on this? This is kind of a dealbreaker for me. I am migrating from Kendo, and have a dropdown with over 5000 items. In Kendo it opens, loads and filters in ms, in ui-select it's sluggish and often freezes the browser.

[aturkelson]

I'm having the same issue with around 500 items. Sometimes the performance gets so bad that the browser actually crashes!

[KevinPHughes]

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.

[mareczek]

Very recently (~ week ago) performance dropped even further. I have problems with a list of 103 items.