Merge branch 'patch-1' of https://github.com/Freezystem/angucomplete-alt

into Freezystem-patch-1
ghiden · Sep 16, 2015 · ee639df · ee639df
2 parents af46074 + 5703899
commit ee639df
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -127,6 +127,7 @@ It expects the returned results from remote API to have a root object. In the ab
 | focus-out | A function or expression to be called when input field lose focus. [example](http://ghiden.github.io/angucomplete-alt/#example12) |  No | focusOut() |
 | disable-input | A model to control disable/enable of input field. [example page](http://ghiden.github.io/angucomplete-alt/#example13) |  No | disableInput |
 | template-url | Customize the markup of the autocomplete template. [example page](http://ghiden.github.io/angucomplete-alt/#example14) |  No | "/my-custom-template.html" |
+| focus-first | Automatically select the first match from the result list. |  No | true |
 
 ### Scrollbar
 

diff --git a/angucomplete-alt.js b/angucomplete-alt.js
@@ -95,7 +95,7 @@
         }
       });
 
-      scope.currentIndex = null;
+      scope.currentIndex = scope.focusFirst ? 0 : null;
       scope.searching = false;
       unbindInitialValue = scope.$watch('initialValue', function(newval, oldval) {
 
@@ -473,7 +473,7 @@
 
       function initResults() {
         scope.showDropdown = displaySearching;
-        scope.currentIndex = -1;
+        scope.currentIndex = scope.focusFirst ? 0 : -1;
         scope.results = [];
       }
 
@@ -593,6 +593,7 @@
           scope.focusIn();
         }
         if (minlength === 0 && (!scope.searchStr || scope.searchStr.length === 0)) {
+          scope.currentIndex = scope.focusFirst ? 0 : scope.currentIndex;
           scope.showDropdown = true;
           showAll();
         }
@@ -769,7 +770,8 @@
         autoMatch: '@',
         focusOut: '&',
         focusIn: '&',
-        inputName: '@'
+        inputName: '@',
+        focusFirst: '@'
       },
       templateUrl: function(element, attrs) {
         return attrs.templateUrl || TEMPLATE_URL;

diff --git a/test/angucomplete-alt.spec.js b/test/angucomplete-alt.spec.js
@@ -1610,4 +1610,79 @@ describe('angucomplete-alt', function() {
       expect(element.find('.angucomplete-row').length).toBe(3);
     });
   });
+
+  describe('focus first attribute', function() {
+    it('should be handled by angucomplete-alt directive', function() {
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search people" selected-object="selectedPerson" local-data="people" search-fields="name" title-field="name" minlength="1" focus-first="true"/>');
+      $scope.selectedPerson = undefined;
+      $scope.people = [
+        {name: 'Jim Beam', email: '[email protected]'},
+        {name: 'Elvis Presly', email: '[email protected]'},
+        {name: 'John Elway', email: '[email protected]'}
+      ];
+      $compile(element)($scope);
+      $scope.$digest();
+
+      expect(element.isolateScope().focusFirst).toBeTruthy();
+      expect(element.isolateScope().currentIndex).toEqual(0);
+    });
+
+    it('should force the focus on first match after match list update', function() {
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search people" selected-object="selectedPerson" local-data="people" search-fields="name" title-field="name" minlength="1" focus-first="true"/>');
+      $scope.selectedPerson = undefined;
+      $scope.people = [
+        {name: 'Jim Beam', email: '[email protected]'},
+        {name: 'Elvis Presly', email: '[email protected]'},
+        {name: 'John Elway', email: '[email protected]'}
+      ];
+      $compile(element)($scope);
+      $scope.$digest();
+
+      var inputField = element.find('#ex1_value');
+      var e = $.Event('keyup');
+
+      e.which = 'l'.charCodeAt(0);
+      inputField.val('l');
+      inputField.trigger('input');
+      inputField.trigger(e);
+      $timeout.flush();
+      expect(element.isolateScope().searchStr).toEqual('l');
+      expect(element.find('.angucomplete-row').length).toEqual(2);
+      expect(element.isolateScope().currentIndex).toEqual(0);
+    });
+
+    it('should force the focus on first match after input is blured and refocused', function() {
+      var element = angular.element('<div angucomplete-alt id="ex1" placeholder="Search people" selected-object="selectedPerson" local-data="people" search-fields="name" title-field="name" minlength="1" focus-first="true"/>');
+      $scope.selectedPerson = undefined;
+      $scope.people = [
+        {name: 'Jim Beam', email: '[email protected]'},
+        {name: 'Elvis Presly', email: '[email protected]'},
+        {name: 'John Elway', email: '[email protected]'}
+      ];
+      $compile(element)($scope);
+      $scope.$digest();
+
+      var inputField = element.find('#ex1_value');
+      var e = $.Event('keyup');
+
+      e.which = 'l'.charCodeAt(0);
+      inputField.val('l');
+      inputField.trigger('input');
+      inputField.trigger(e);
+
+      element.isolateScope().currentIndex = 1;
+      $timeout.flush();
+      expect(element.find('.angucomplete-row').length).toEqual(2);
+
+      inputField.blur();
+      $timeout.flush();
+      expect(element.find('#ex1_dropdown').hasClass('ng-hide')).toBeTruthy();
+
+      inputField.focus();
+      $timeout(function(){
+        expect(element.find('#ex1_dropdown').hasClass('ng-hide')).toBeFalsy();
+        expect(element.isolateScope().currentIndex).toEqual(0);
+      },0);
+    });
+  });
 });