I am facing a challenge with my ui-select field which utilizes infinite-scroll functionality due to having a large number of options. However, it becomes cumbersome to scroll down and find the desired option among so many choices.
<ui-select-choices
infinite-scroll="$select.infiniteStepIncrement()"
infinite-scroll-distance="2"
infinite-step="2"
current-limit="10"
all-options="app.bigList"
repeat="option.id as option in app.bigList | limitTo: $select.infiniteCurrentLimit">
<span ng-bind-html="option.value"></span>
</ui-select-choices>
To address this issue, I attempted to apply a filter: $select:search on the field. While this successfully filters the options, it unfortunately disables the scrolling feature.
<ui-select-choices
infinite-scroll="$select.infiniteStepIncrement()"
infinite-scroll-distance="2"
infinite-step="2"
current-limit="10"
all-options="app.bigList"
repeat="option.id as option in app.bigList | filter: $select.search | limitTo: $select.infiniteCurrentLimit">
<span ng-bind-html="option.value"></span>
</ui-select-choices>
Is there a solution that would allow these features to work seamlessly together?