diff --git a/CHANGELOG.md b/CHANGELOG.md index 7621caa..ba12e2b 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/bower.json b/bower.json index 09d2dd9..9c56a6a 100755 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "paper-autocomplete", - "version": "3.0.2", + "version": "3.1.0", "authors": [ "S. Francis", "Rodolfo Oviedo ", diff --git a/demo/index.html b/demo/index.html index 1720321..99b99a0 100755 --- a/demo/index.html +++ b/demo/index.html @@ -102,6 +102,17 @@

Local Data-Source Binding

+ + + +

Remote Data-Source Binding

Mock remote users data binding. Remote data binding delegates the responsibility of filtering the data source diff --git a/package.json b/package.json index 8e19810..d1ebcb3 100644 --- a/package.json +++ b/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 ", "contributors": [ "Rodolfo Oviedo ", diff --git a/paper-autocomplete-suggestions.html b/paper-autocomplete-suggestions.html index 0a30e91..5703e01 100644 --- a/paper-autocomplete-suggestions.html +++ b/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); }, diff --git a/paper-autocomplete.html b/paper-autocomplete.html index 1b6002b..c576137 100644 --- a/paper-autocomplete.html +++ b/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]]"> @@ -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 *************/ diff --git a/test/paper-autocomplete_test_local.html b/test/paper-autocomplete_test_local.html index 5144d7c..49ea10d 100644 --- a/test/paper-autocomplete_test_local.html +++ b/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