From 29f41e401225f841b908e123cb951e0745da3d47 Mon Sep 17 00:00:00 2001
From: Yancy Matherne <ymatherne@boundlessgeo.com>
Date: Fri, 28 Apr 2017 21:02:45 -0500
Subject: [PATCH] fix(spinner): add the refresh spinner to the select-multiple
 template

The multiple mode would not show a refresh spinner even with spinner-enabled set to true. Add the same spinner html from the single selection template to the multiple selection template.

Closes #1985
---
 src/bootstrap/select-multiple.tpl.html |  1 +
 test/select.spec.js                    | 66 ++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)

diff --git a/src/bootstrap/select-multiple.tpl.html b/src/bootstrap/select-multiple.tpl.html
index b8b329894..591afcf0d 100644
--- a/src/bootstrap/select-multiple.tpl.html
+++ b/src/bootstrap/select-multiple.tpl.html
@@ -1,6 +1,7 @@
 <div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control" ng-class="{open: $select.open}">
   <div>
     <div class="ui-select-match"></div>
+    <span ng-show="$select.open && $select.refreshing && $select.spinnerEnabled" class="ui-select-refreshing {{$select.spinnerClass}}"></span>
     <input type="search"
            autocomplete="off"
            autocorrect="off"
diff --git a/test/select.spec.js b/test/select.spec.js
index a23c63f68..3922834af 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -1878,6 +1878,10 @@ describe('ui-select tests', function () {
         if (attrs.limit !== undefined) { attrsHtml += ' limit="' + attrs.limit + '"'; }
         if (attrs.onSelect !== undefined) { attrsHtml += ' on-select="' + attrs.onSelect + '"'; }
         if (attrs.removeSelected !== undefined) { attrsHtml += ' remove-selected="' + attrs.removeSelected + '"'; }
+        if (attrs.refresh !== undefined) { choicesAttrsHtml += ' refresh="' + attrs.refresh + '"'; }
+        if (attrs.refreshDelay !== undefined) { choicesAttrsHtml += ' refresh-delay="' + attrs.refreshDelay + '"'; }
+        if (attrs.spinnerEnabled !== undefined) { attrsHtml += ' spinner-enabled="' + attrs.spinnerEnabled + '"'; }
+        if (attrs.spinnerClass !== undefined) { attrsHtml += ' spinner-class="' + attrs.spinnerClass + '"'; }
       }
 
       return compileTemplate(
@@ -2988,6 +2992,68 @@ describe('ui-select tests', function () {
         expect($(el).scope().$select.search).toEqual('');
       });
     });
+
+    describe('Test Spinner for promises', function () {
+      var deferred;
+
+      function getFromServer() {
+        deferred = $q.defer();
+        return deferred.promise;
+      }
+      it('should have a default value of false', function () {
+        var control = createUiSelectMultiple();
+        expect(control.scope().$select.spinnerEnabled).toEqual(false);
+      });
+
+      it('should have a set a value of true', function () {
+        var control = createUiSelectMultiple({ spinnerEnabled: true });
+        expect(control.scope().$select.spinnerEnabled).toEqual(true);
+      });
+
+      it('should have a default value of glyphicon-refresh ui-select-spin', function () {
+        var control = createUiSelectMultiple();
+        expect(control.scope().$select.spinnerClass).toEqual('glyphicon glyphicon-refresh ui-select-spin');
+      });
+
+      it('should have set a custom class value of randomclass', function () {
+        var control = createUiSelectMultiple({ spinnerClass: 'randomclass' });
+        expect(control.scope().$select.spinnerClass).toEqual('randomclass');
+      });
+
+      it('should not display spinner when disabled', function () {
+        scope.getFromServer = getFromServer;
+        var el = createUiSelectMultiple({ theme: 'bootstrap', refresh: "getFromServer($select.search)", refreshDelay: 0 });
+        openDropdown(el);
+        var spinner = el.find('.ui-select-refreshing');
+        expect(spinner.hasClass('ng-hide')).toBe(true);
+        setSearchText(el, 'a');
+        expect(spinner.hasClass('ng-hide')).toBe(true);
+        deferred.resolve();
+        scope.$digest();
+        expect(spinner.hasClass('ng-hide')).toBe(true);
+      });
+
+      it('should display spinner when enabled', function () {
+        scope.getFromServer = getFromServer;
+        var el = createUiSelectMultiple({ spinnerEnabled: true, theme: 'bootstrap', refresh: "getFromServer($select.search)", refreshDelay: 0 });
+        openDropdown(el);
+        var spinner = el.find('.ui-select-refreshing');
+        expect(spinner.hasClass('ng-hide')).toBe(true);
+        setSearchText(el, 'a');
+        expect(spinner.hasClass('ng-hide')).toBe(false);
+        deferred.resolve();
+        scope.$digest();
+        expect(spinner.hasClass('ng-hide')).toBe(true);
+      });
+
+      it('should not display spinner when enabled', function () {
+        var el = createUiSelectMultiple({ spinnerEnabled: true, theme: 'bootstrap', spinnerClass: 'randomclass' });
+        openDropdown(el);
+        var spinner = el.find('.ui-select-refreshing');
+        setSearchText(el, 'a');
+        expect(el.scope().$select.spinnerClass).toBe('randomclass');
+      });
+    });
   });
 
   it('should add an id to the search input field', function () {