New option added to highlight always first result automatically

Author: jhuesos

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This component follows *Semantic Versioning* (aka SemVer), visit (http://semver.org/) to learn more about it.
 
+## Release 3.1.0 (2017-08-27)
+### New Features
+- Added a new boolean option `highlight-first` to both `paper-autocomplete` and `paper-autocomplete-suggestions` that
+when set, it will always highlight the first result each time new suggestions are presented.
+
 ## Release 3.0.2 (2017-08-23)
 ### Bug Fixes
 - It is now again possible to add a custom `paper-input` suffix. See the new demo.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-autocomplete",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "authors": [
     "S. Francis",
     "Rodolfo Oviedo <[email protected]>",

demo/index.html

@@ -102,6 +102,17 @@ <h3>Local Data-Source Binding</h3>
       </template>
     </demo-snippet>
 
+    <demo-snippet>
+      <template>
+        <paper-autocomplete id="highlightFirst"
+                            class="autocomplete-states"
+                            label="Auto highlight first option"
+                            id="highlight-first-example"
+                            highlight-first>
+        </paper-autocomplete>
+      </template>
+    </demo-snippet>
+
     <h3>Remote Data-Source Binding</h3>
     <p>
       Mock remote users data binding. Remote data binding delegates the responsibility of filtering the data source

package.json

@@ -1,7 +1,7 @@
 {
   "name": "paper-autocomplete",
   "description": "Material Design autocomplete component.",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "author": "S. Francis <[email protected]>",
   "contributors": [
     "Rodolfo Oviedo <[email protected]>",

paper-autocomplete-suggestions.html

@@ -309,6 +309,14 @@
           type: Function
         },
 
+        /**
+         * If `true`, it will always highlight the first result each time new suggestions are presented.
+         */
+        highlightFirst: {
+          type: Boolean,
+          value: false
+        },
+
         /**
          * `_suggestions` Array with the actual suggestions to display
          */
@@ -596,6 +604,10 @@
               this._hasItemHighBeenCalculated = true;
             }
           }
+
+          if (this.highlightFirst) {
+            this._moveHighlighted(DIRECTION.DOWN);
+          }
         }, 100);
       },
 

paper-autocomplete.html

@@ -209,7 +209,8 @@
                                     query-fn="[[queryFn]]"
                                     event-namespace="[[eventNamespace]]"
                                     highlighted-suggestion="{{_highlightedSuggestion}}"
-                                    is-open="{{_isSuggestionsOpened}}">
+                                    is-open="{{_isSuggestionsOpened}}"
+                                    highlight-first="[[highlightFirst]]">
 
       <slot id="templates" name="autocomplete-custom-template"></slot>
 
@@ -392,6 +393,14 @@
           type: Function
         },
 
+        /**
+         * If `true`, it will always highlight the first result each time new suggestions are presented.
+         */
+         highlightFirst: {
+          type: Boolean,
+          value: false
+        },
+
         /*************
         * PRIVATE
         *************/

test/paper-autocomplete_test_local.html

@@ -332,6 +332,37 @@
         expect(isSuffixBtnAdded).to.be.true;
       });
 
+      describe('autocomplete option', function () {
+        it('if set to `true`, it should highlight always the first suggestion', function () {
+          element.setAttribute('highlight-first', '');
+
+          var suggestions = element.$.paperAutocompleteSuggestions.$.suggestionsWrapper;
+          var input = element.$.autocompleteInput;
+
+          enterCharacter(input, 'A');
+
+          var activeSuggestions = suggestions.querySelectorAll('paper-item.active');
+          var allSuggestions = suggestions.querySelectorAll('paper-item');
+
+          expect(allSuggestions).not.to.be.empty;
+          expect(activeSuggestions.length).to.equal(1);
+          expect(activeSuggestions[0]).to.equal(allSuggestions[0]);
+        });
+
+        it('with default value, it should not highlight the first suggestion', function () {
+          var suggestions = element.$.paperAutocompleteSuggestions.$.suggestionsWrapper;
+          var input = element.$.autocompleteInput;
+
+          enterCharacter(input, 'A');
+
+          var activeSuggestions = suggestions.querySelectorAll('paper-item.active');
+          var allSuggestions = suggestions.querySelectorAll('paper-item');
+
+          expect(allSuggestions).not.to.be.empty;
+          expect(activeSuggestions).to.be.empty;
+        });
+      });
+
       a11ySuite('basic', ['badAriaAttributeValue', 'nonExistentRelatedElement']);
 
       // HELPERS