I am working with an AngularJS project, where I upgraded the library from ui-select2 to ui-select. After the upgrade, I’m having issues with the search input spinner not showing for multiple select dropdowns, although it works fine for single select dropdowns.
Html
<ui-select multiple ng-if="list.edit" ng-model="list.EmployeeList" theme="select2" class="col-xs-12">
<ui-select-match allow-clear="true" placeholder="Select People for Delivery">{{$item.Name}}-{{$item.EmployeeCode}}</ui-select-match>
<ui-select-choices refresh="selectOptionsEmployeeWithoutRelievingPromise($select.search)" refresh-delay="500" repeat="item in EmployeesWithoutRelieving">
{{item.Name}}
</ui-select-choices>
<div ui-select-no-choice class="no-match-message">No matches found</div>
</ui-select>
Css
/*Custom css gif loader for search input*/
.ui_select_input_spinner .ui-select-search{
background-image: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif');
background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}
/* Hide the search icon when loading */
.ui_select_input_spinner div.search-container.select2-search::after {
visibility: hidden; /* or display: none; */
}
Problem Description
The above CSS works fine for a single dropdown, but it doesn’t work for the multiple dropdown. I suspect the issue lies in how the class is applied, and I need to generalize it so that it works for both single and multiple select dropdowns.
JavaScript (select.js)
ctrl.refresh = function (refreshAttr) {
if (refreshAttr !== undefined) {
// Debounce
if (_refreshDelayPromise) {
$timeout.cancel(_refreshDelayPromise);
}
// Automatically add the 'loading' class
$element.addClass('ui_select_input_spinner'); // Add the 'loading' class
_refreshDelayPromise = $timeout(function () {
if ($scope.$select.search.length >= $scope.$select.minimumInputLength) {
var refreshPromise = $scope.$eval(refreshAttr);
if (refreshPromise && angular.isFunction(refreshPromise.then) && !ctrl.refreshing) {
ctrl.refreshing = true;
refreshPromise.finally(function () {
ctrl.refreshing = false;
$element.removeClass('ui_select_input_spinner'); // Remove the 'loading' class when refresh completes
});
} else {
$element.removeClass('ui_select_input_spinner'); // Remove the class if there's no promise
}
} else {
$element.removeClass('ui_select_input_spinner'); // Remove the class if input length is not met
}
}, ctrl.refreshDelay);
}
};
Expected Outcome
I expect the spinner to show while fetching the results in both single and multiple ui-select dropdowns. Currently, the spinner only appears for single dropdowns, but not for multiple dropdowns.