feat(autoComplete): Add autoSelectFirstSuggestion option

Add an option to make the first tag suggestion be automatically selected as soon as it appears. The default value is false. Closes mbenford#136
hamchapman · Jul 10, 2014 · 3469596 · 3469596
1 parent 0ec722a
commit 3469596
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/src/auto-complete.js b/src/auto-complete.js
@@ -18,6 +18,8 @@
  * @param {boolean=} [highlightMatchedText=true] Flag indicating that the matched text will be highlighted in the
  *                                               suggestions list.
  * @param {number=} [maxResultsToShow=10] Maximum number of results to be displayed at a time.
+ * @param {boolean=} [autoSelectFirstSuggestion=false] Flag indicating that the first suggestion will not be
+ *                                                     automatically selected once the suggestion box is shown.
  */
 tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInputConfig) {
     function SuggestionList(loadFn, options) {
@@ -41,7 +43,11 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
             $timeout.cancel(debouncedLoadId);
         };
         self.show = function() {
-            self.selected = null;
+            if (self.items.length > 0 && options.autoSelectFirstSuggestion) {
+                self.select(0);
+            } else {
+                self.selected = null;
+            }
             self.visible = true;
         };
         self.load = function(query, tags) {
@@ -116,7 +122,8 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                 debounceDelay: [Number, 100],
                 minLength: [Number, 3],
                 highlightMatchedText: [Boolean, true],
-                maxResultsToShow: [Number, 10]
+                maxResultsToShow: [Number, 10],
+                autoSelectFirstSuggestion: [Boolean, false]
             });
 
             options = scope.options;

diff --git a/test/auto-complete.spec.js b/test/auto-complete.spec.js
@@ -879,4 +879,25 @@ describe('autoComplete directive', function() {
             expect(getSuggestionText(2)).toBe('Item3');
         });
     });
+
+    describe('auto-select-first-suggestion option', function() {
+        it('initializes the option to false', function() {
+            // Arrange/Act
+            compile();
+
+            // Assert
+            expect(isolateScope.options.autoSelectFirstSuggestion).toBe(false);
+        });
+
+        it('selects the first suggestion after the suggestion box is shown if true', function() {
+            // Arrange
+            compile('auto-select-first-suggestion="true"');
+
+            //Act
+            loadSuggestions(2);
+
+            // Assert
+            expect(getSuggestion(0).hasClass('selected')).toBe(true);
+        });
+    });
 });
diff --git a/test/test-page.html b/test/test-page.html
@@ -59,7 +59,8 @@
       <auto-complete source="loadItems($query)"
                      debounce-delay="0"
                      min-length="1"
-                     max-results-to-show="10">
+                     max-results-to-show="10"
+                     auto-select-first-suggestion="false">
       </auto-complete>
     </tags-input>