@financial-times/o-autocomplete 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.9.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.8.1...o-autocomplete-v1.9.0) (2023-09-08)
+
+
+### Features
+
+* Add an `autoselect` option ([c414db4](https://github.com/Financial-Times/origami/commit/c414db4780e8f74bffb25e9a04004c4d450077f4))
+
 ## [1.8.1](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.8.0...o-autocomplete-v1.8.1) (2023-08-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/o-autocomplete",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "An origami component for autocomplete inputs",
   "keywords": [
     "autocomplete",

package/src/js/autocomplete.js

@@ -184,6 +184,7 @@ function initClearButton(instance) {
  * @property {MapOptionToSuggestedValue} [mapOptionToSuggestedValue] - Function which transforms a suggestion before rendering.
  * @property {onConfirm} [onConfirm] - Function which is called when the user selects an option
  * @property {SuggestionTemplate} [suggestionTemplate] - Function to override how a suggestion item is rendered.
+ * @property {boolean} [autoselect] - Boolean to specify whether first option in suggestions list is highlighted.
  */
 
 class Autocomplete {
@@ -211,6 +212,9 @@ class Autocomplete {
 		if (opts.suggestionTemplate) {
 			this.options.suggestionTemplate = opts.suggestionTemplate;
 		}
+		if (opts.autoselect) {
+			this.options.autoselect = opts.autoselect;
+		}
 
 		const container = document.createElement('div');
 		container.classList.add('o-autocomplete__listbox-container');
@@ -281,6 +285,7 @@ class Autocomplete {
 				displayMenu: 'overlay',
 				defaultValue: this.options.defaultValue || '',
 				showNoOptionsFound: false,
+				autoselect: this.options.autoselect || false,
 				templates: {
 					/**
 					 * Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.
@@ -360,7 +365,7 @@ class Autocomplete {
 						this.options.onConfirm(option);
 					}
 				},
-				autoselect: false,
+				autoselect: this.options.autoselect || false,
 				// To fallback with JS an enhanced element's default value should
 				// be set using static html.
 				defaultValue: '',