refresh on active

Author: abudel

src/uiSelectChoicesDirective.js

@@ -27,6 +27,8 @@ uis.directive('uiSelectChoices',
         $select.disableChoiceExpression = attrs.uiDisableChoice;
         $select.onHighlightCallback = attrs.onHighlight;
 
+        $select.refreshOnActive = scope.$eval(attrs.refreshOnActive);
+
         if(groupByExp) {
           var groups = element.querySelectorAll('.ui-select-choices-group');
           if (groups.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-group but got '{0}'.", groups.length);
@@ -52,7 +54,15 @@ uis.directive('uiSelectChoices',
         scope.$watch('$select.search', function(newValue) {
           if(newValue && !$select.open && $select.multiple) $select.activate(false, true);
           $select.activeIndex = $select.tagging.isActivated ? -1 : 0;
-          $select.refresh(attrs.refresh);
+          if(!$select.refreshOnActive || ($select.refreshOnActive && $select.refreshIsActive)) {
+            $select.refresh(attrs.refresh);
+          }
+        });
+
+        scope.$watch('$select.refreshIsActive', function(newValue, oldValue){
+          if(angular.isUndefined(oldValue) && newValue){
+            $select.refresh(attrs.refresh);
+          }
         });
 
         attrs.$observe('refreshDelay', function() {

src/uiSelectController.js

@@ -34,6 +34,8 @@ uis.controller('uiSelectCtrl',
   ctrl.closeOnSelect = true; // Initialized inside uiSelect directive link function
   ctrl.clickTriggeredSelect = false;
   ctrl.$filter = $filter;
+  ctrl.refreshOnActive = undefined;
+  ctrl.refreshIsActive = undefined;
 
   ctrl.isEmpty = function() {
     return angular.isUndefined(ctrl.selected) || ctrl.selected === null || ctrl.selected === '';
@@ -65,6 +67,8 @@ uis.controller('uiSelectCtrl',
 
       ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? 0 : ctrl.activeIndex;
 
+      ctrl.refreshIsActive = true;
+
       // ensure that the index is set to zero for tagging variants
       // that where first option is auto-selected
       if ( ctrl.activeIndex === -1 && ctrl.taggingLabel !== false ) {

test/select.spec.js

@@ -191,7 +191,7 @@ describe('ui-select tests', function() {
 
     expect(getMatchLabel(el)).toEqual('Adam');
   });
-  
+
   it('should correctly render initial state with track by feature', function() {
     var el = compileTemplate(
       '<ui-select ng-model="selection.selected"> \
@@ -1791,4 +1791,33 @@ describe('ui-select tests', function() {
       }
     });
   });
+
+  describe('with refresh on active', function(){
+    it('should not refresh untill is activate', function(){
+
+      var el = compileTemplate(
+        '<ui-select ng-model="selection.selected"> \
+          <ui-select-match> \
+          </ui-select-match> \
+          <ui-select-choices repeat="person in people | filter: $select.search" \
+            refresh="fetchFromServer($select.search)" refresh-on-active="true" refresh-delay="0"> \
+            <div ng-bind-html="person.name | highlight: $select.search"></div> \
+            <div ng-if="person.name==\'Wladimir\'"> \
+              <span class="only-once">I should appear only once</span>\
+            </div> \
+          </ui-select-choices> \
+        </ui-select>'
+      );
+
+      scope.fetchFromServer = function(){};
+      spyOn(scope, 'fetchFromServer');
+      $timeout.flush();
+      expect(scope.fetchFromServer.calls.any()).toEqual(false);
+
+      el.scope().$select.activate();
+      $timeout.flush();
+      expect(scope.fetchFromServer.calls.any()).toEqual(true);
+    });
+
+  });
 });