feat(autocomplete): Add showOnEmpty option

Add an option to allow the tag list to show when input is empty. This feature is useful when the user wants to see an unfiltered list of all available suggestions before typing.
mbenford · Jul 26, 2014 · 28c615f · 28c615f
1 parent c7ae450
commit 28c615f
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 4 deletions.
diff --git a/src/auto-complete.js b/src/auto-complete.js
@@ -21,6 +21,9 @@
  * @param {boolean=} [loadOnDownArrow=false] Flag indicating that the source option will be evaluated when the down arrow
  *                                           key is pressed and the suggestion list is closed. The current input value
  *                                           is available as $query.
+ * @param {boolean=} {showOnEmpty=false} Flag indicating whether the dropdown will show on input focus. When using this
+ *                                       option the source expression should handle a null query to account for focus on
+ *                                       an empty input.
  */
 tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInputConfig) {
     function SuggestionList(loadFn, options) {
@@ -109,7 +112,8 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                 minLength: [Number, 3],
                 highlightMatchedText: [Boolean, true],
                 maxResultsToShow: [Number, 10],
-                loadOnDownArrow: [Boolean, false]
+                loadOnDownArrow: [Boolean, false],
+                showOnEmpty: [Boolean, false]
             });
 
             options = scope.options;
@@ -167,7 +171,10 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                 .on('input-change', function(value) {
                     if (value && value.length >= options.minLength) {
                         suggestionList.load(value, tagsInput.getTags());
-                    } else {
+                    } else if (scope.options.showOnEmpty) {
+                        suggestionList.load('', tagsInput.getTags());
+                    }
+                    else {
                         suggestionList.reset();
                     }
                 })
@@ -224,6 +231,11 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
                 })
                 .on('input-blur', function() {
                     suggestionList.reset();
+                })
+                .on('input-focus', function () {
+                    if (scope.options.showOnEmpty) {
+                        suggestionList.load('', tagsInput.getTags(), true);
+                    }
                 });
 
             documentClick = function() {
@@ -240,4 +252,4 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, tagsInpu
             });
         }
     };
-});
+});
diff --git a/src/tags-input.js b/src/tags-input.js
@@ -295,6 +295,7 @@ tagsInput.directive('tagsInput', function($timeout, $document, tagsInputConfig)
                     if (scope.hasFocus) {
                         return;
                     }
+                    scope.events.trigger('input-focus');
                     scope.hasFocus = true;
                     events.trigger('input-focus');
 

diff --git a/test/auto-complete.spec.js b/test/auto-complete.spec.js
@@ -817,6 +817,40 @@ describe('autoComplete directive', function() {
         });
     });
 
+    describe('show-on-empty option', function(){
+        it('initialize the option to false', function(){
+            //Arrange
+            compile();
+
+            //Assert
+            expect(isolateScope.options.showOnEmpty).toBe(false);
+        });
+
+        it('shows the suggestion box when the input field becomes empty', function(){
+            //Arrange
+            compile('show-on-empty="true"');
+
+            //Act
+            changeInputValue('');
+            $timeout.flush();
+
+            expect($scope.loadItems).toHaveBeenCalledWith('');
+        });
+
+        it('shows the suggestion box when input is focused and input is empty', function(){
+            //Arrange
+            compile('show-on-empty="true"');
+
+            //Act
+            eventHandlers['input-focus']();
+            $timeout.flush();
+
+            //Assert
+            expect($scope.loadItems).toHaveBeenCalledWith('');
+        });
+
+    });
+
     describe('highlight-matched-text option', function() {
         it('initializes the option to true', function() {
             // Arrange/Act

diff --git a/test/test-page.html b/test/test-page.html
@@ -60,7 +60,8 @@
                      debounce-delay="0"
                      min-length="1"
                      max-results-to-show="10"
-                     load-on-down-arrow="true">
+                     load-on-down-arrow="true"
+                     show-on-empty="true">
       </auto-complete>
     </tags-input>