@financial-times/o-autocomplete - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

CHANGELOG.md

 # Changelog
 
+## [1.7.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.6.2...o-autocomplete-v1.7.0) (2022-09-14)
+
+
+### Features
+
+* autocomplete, add a `defaultValue` for a default input value ([#812](https://www.github.com/Financial-Times/origami/issues/812)) ([70a77ae](https://www.github.com/Financial-Times/origami/commit/70a77ae218c9c19967fe3bb32c18206d7cd9c2c3))
+
 ### [1.6.2](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.6.1...o-autocomplete-v1.6.2) (2022-04-21)
@@ -4,0 +11,0 @@

demos/src/dynamic-complex/dynamic-complex.js

@@ -16,9 +16,15 @@ import Autocomplete from '../../../main.js';
 /**
- * @param {CustomOption|undefined} option - The option to transform into a suggestion string
+ * @param {CustomOption} option - The option to transform into a suggestion string
  * @returns {string} The string to display in the suggestions dropdown for this option
  */
 function mapOptionToSuggestedValue(option) {
-	if (option) {
-		return option.Country_Name;
+	if (typeof option !== 'object') {
+		throw new Error(`Could not map option to suggested value, unexpected type: ${typeof option}.`);
 	}
+
+	if (typeof option.Country_Name !== 'string') {
+		throw new Error(`Could not map option to suggested value, option.Country_Name is not a string`);
+	}
+
+	return option.Country_Name;
 }
@@ -60,2 +66,3 @@
 	mapOptionToSuggestedValue,
+	defaultValue: data.find((d) => d['Two_Letter_Country_Code'] === 'GB')?.Country_Name,
 	onConfirm: function (option) {
@@ -62,0 +69,0 @@ // eslint-disable-next-line no-console

package.json

 {
   "name": "@financial-times/o-autocomplete",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "An origami component for autocomplete inputs",
@@ -25,3 +25,4 @@ "keywords": [
     "test": "bash ../../scripts/component/test.bash",
-    "lint": "bash ../../scripts/component/lint.bash"
+    "lint": "bash ../../scripts/component/lint.bash",
+    "watch": "bash ../../scripts/component/watch.bash"
   },
@@ -28,0 +29,0 @@ "engines": {

README.md

@@ -46,3 +46,3 @@ # o-autocomplete
 
-To provide a dynamic set of suggestions, you will need to provide a javascript function or name of a javascript function on the window object which follows the [dynamic-suggestions-function](dynamic-suggestions-function) <abbr title="application programming interface">API</abbr>.
+To provide a dynamic set of suggestions, provide a javascript function or name of a javascript function on the window object which follows the [dynamic-suggestions-function](#dynamic-suggestions-function) <abbr title="application programming interface">API</abbr>.
 
@@ -60,8 +60,8 @@ The input element requires an `id` attribute, this is used within the component to implement the accessibility features.
 
-Below is an example of how to combine o-forms and o-autocomplete components together:
+Below is an example of how to combine o-forms and o-autocomplete components together. Note the `label` and `select` element are connected using `for` and `id` attributes.
 ```html
-<label class="o-forms-field" >
-    <span class="o-forms-title">
+<span class="o-forms-field" >
+    <label for="my-autocomplete" class="o-forms-title">
         <span class="o-forms-title__main">Select your country</span>
-    </span>
+    </label>
     <span class="o-forms-input o-forms-input--select">
@@ -75,3 +75,3 @@ <span data-o-component="o-autocomplete" class="o-autocomplete">
     </span>
-</label>
+</span>
 ```
@@ -107,3 +107,2 @@ ## Sass
 ```
-
 ### dynamic suggestions function
@@ -118,3 +117,3 @@
  * @callback PopulateOptions
- * @param {Array<*>} options - The options which match the rext which was typed into the autocomplete by the user
+ * @param {Array<*>} options - The options which match the text which was typed into the autocomplete by the user
  * @returns {void}
@@ -245,3 +244,10 @@ */
 
+#### `defaultValue` (default: `''`)
 
+Type: `string`
+
+If setting a default input value for a [dynamic set of suggestions](for-a-dynamic-set-of-suggestions) set the `defaultValue` option.
+
+_When progressively enhancing a [static set of suggestions](#for-a-static-set-of-suggestions) set a default value using HTML, by providing an appropriate `option` element._
+
 ## Keyboard Support
@@ -248,0 +254,0 @@

src/js/autocomplete.js

@@ -176,2 +176,3 @@ // We use our own fork of accessible-autocomplete because the main package is not being actively maintained and has bugs which we needed to fix
  * @typedef {object} AutocompleteOptions
+ * @property {string} [defaultValue] - Specify a string to prefill the autocomplete with
  * @property {Source} [source] - The function which retrieves the suggestions to display
@@ -196,2 +197,3 @@ * @property {MapOptionToSuggestedValue} [mapOptionToSuggestedValue] - Function which transforms a suggestion before rendering
 			this.options.source = opts.source;
+			this.options.defaultValue = opts.defaultValue;
 		}
@@ -255,2 +257,3 @@ if (opts.mapOptionToSuggestedValue) {
 			}
+
 			this.autocompleteEl.innerHTML = '';
@@ -272,2 +275,3 @@ this.autocompleteEl.appendChild(this.container);
 				displayMenu: 'overlay',
+				defaultValue: this.options.defaultValue || '',
 				showNoOptionsFound: false,
@@ -279,6 +283,6 @@ templates: {
 					 * @param {*} option The suggestion to apply the template with.
-					 * @returns {string} HTML string to represent a single suggestion.
+					 * @returns {string|undefined} HTML string to represent a single suggestion.
 					 */
 					suggestion: (option) => {
-						if (typeof option !== 'undefined') {
+						if (typeof option === 'object') {
 							// If the `mapOptionToSuggestedValue` function is defined
@@ -293,7 +297,9 @@ // Apply the function to the option. This is a way for the
 								option = this.mapOptionToSuggestedValue(option);
-							} else if (typeof option !== 'string') {
-								throw new Error(`The option trying to be displayed as a suggestion is not a string, it is "${typeof option}". o-autocomplete can only display strings as suggestions. Define a \`mapOptionToSuggestedValue\` function to convert the option into a string to be used as the suggestion.`);
 							}
 						}
 
+						if (typeof option !== 'string' && typeof option !== 'undefined') {
+							throw new Error(`The option trying to be displayed as a suggestion is not a string, it is "${typeof option}". o-autocomplete can only display strings as suggestions. Define a \`mapOptionToSuggestedValue\` function to convert the option into a string to be used as the suggestion.`);
+						}
+
 						return this.suggestionTemplate(option);
@@ -305,6 +311,6 @@ },
 					 * @param {*} option The suggestion which was selected.
-					 * @returns {string} String to represent the suggestion.
+					 * @returns {string|undefined} String to represent the suggestion.
 					 */
 					inputValue: (option) => {
-						if (typeof option !== 'undefined') {
+						if (typeof option === 'object') {
 							// If the `mapOptionToSuggestedValue` function is defined
@@ -319,7 +325,9 @@ // Apply the function to the option. This is a way for the
 								option = this.mapOptionToSuggestedValue(option);
-							} else if (typeof option !== 'string') {
-								throw new Error(`The option trying to be displayed as a suggestion is not a string, it is "${typeof option}". o-autocomplete can only display strings as suggestions. Define a \`mapOptionToSuggestedValue\` function to convert the option into a string to be used as the suggestion.`);
 							}
 						}
 
+						if (typeof option !== 'string' && typeof option !== 'undefined') {
+							throw new Error(`The option trying to be displayed as a suggestion is not a string, it is "${typeof option}". o-autocomplete can only display strings as suggestions. Define a \`mapOptionToSuggestedValue\` function to convert the option into a string to be used as the suggestion.`);
+						}
+
 						return option;
@@ -349,2 +357,4 @@ }
 				autoselect: false,
+				// To fallback with JS an enhanced element's default value should
+				// be set using static html.
 				defaultValue: '',
@@ -374,6 +384,7 @@ placeholder: '',
 		// o-autocomplete has a UI design to highlight characters in the suggestions.
+		const input = this.autocompleteEl.querySelector('input');
 		/**
 		 * @type {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.
 		 */
-		const characters = highlightSuggestion(suggestedValue, this.autocompleteEl.querySelector('input').value);
+		const characters = highlightSuggestion(suggestedValue, input ? input.value : suggestedValue);
 
@@ -408,3 +419,4 @@ let output = '';
 			return {
-				source: autocompleteEl.dataset.oAutocompleteSource
+				source: autocompleteEl.dataset.oAutocompleteSource,
+				defaultValue: autocompleteEl.dataset.oAutocompleteDefaultValue
 			};
@@ -411,0 +423,0 @@ } else {

No alert changes

Improved metrics

Total package byte prevSize

118431

increased by1.62%

Lines of code

3227

increased by0.44%

Number of lines in readme file

288

increased by2.13%

No dependency changes