@financial-times/o-autocomplete 2.1.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.3.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v2.2.0...o-autocomplete-v2.3.0) (2026-01-15)
+
+
+### Features
+
+* Add o-autocomplete confirmOnBlur option ([#2322](https://github.com/Financial-Times/origami/issues/2322)) ([ba27a93](https://github.com/Financial-Times/origami/commit/ba27a93fa1c91ce2f8f1d3897095b88ed34ef6cc))
+
+## [2.2.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v2.1.0...o-autocomplete-v2.2.0) (2026-01-12)
+
+
+### Features
+
+* Add o-autocomplete showNoOptionsFound option ([a869a04](https://github.com/Financial-Times/origami/commit/a869a04ffc045d526bb1facf7c89215c4933754f))
+
+
+### Bug Fixes
+
+* Add o-autocomplete clear button post-click logic ([67f4fed](https://github.com/Financial-Times/origami/commit/67f4fed14380e8e7b12d3d36156604e0a51e6446))
+
 ## [2.1.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v2.0.0...o-autocomplete-v2.1.0) (2025-11-13)
 
 

package/README.md

@@ -11,6 +11,7 @@ An Origami component for autocomplete inputs. This is built on top of the excell
 - [JavaScript](#javascript)
   - [dynamic suggestions function](#dynamic-suggestions-function)
   - [mapOptionToSuggestedValue](#mapoptiontosuggestedvalue)
+  - [suggestionTemplate](#suggestiontemplate)
   - [onConfirm](#onconfirm)
 - [Keyboard Support](#keyboard-support)
   - [When focus is within the text input](#when-focus-is-within-the-text-input)
@@ -202,43 +203,6 @@ new oAutocomplete(oAutocompleteElement, {
 | ------ | --------------- | ------------------------------------------------ |
 | option | <code>\*</code> | The option to transform into a suggestion string |
 
-### onConfirm
-
-This function is called when the user selects an option and is called with the option the user selected.
-
-#### Example
-
-```js
-import oAutocomplete from 'o-autocomplete';
-
-async function customSuggestions(query, populateOptions) {
-	const suggestions = await getSuggestions(query);
-	populateOptions(suggestions);
-}
-
-/**
- * @param {{"suggestionText": string}} option - The option to transform into a suggestion string
- * @returns {string} The string to display as the suggestions for this option
-*/
-function mapOptionToSuggestedValue(option) {
-	return option.suggestionText;
-}
-
-/**
- * @param {{"suggestionText": string}} option - The option the user selected
-*/
-function onConfirm(option) {
-    console.log('You selected option: ', option);
-}
-
-const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
-new oAutocomplete(oAutocompleteElement, {
-    onConfirm
-    mapOptionToSuggestedValue,
-    source: customSuggestions,
-});
-```
-
 ### suggestionTemplate
 
 This function is used to override the default rendering of suggestion items, with a function that returns a custom HTML string for the given option.

package/package.json

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

package/src/js/autocomplete.js

@@ -209,6 +209,8 @@ class Autocomplete {
 		if (opts.onConfirm) {
 			this.options.onConfirm = opts.onConfirm;
 		}
+		this.options.showNoOptionsFound = opts.showNoOptionsFound || false;
+		this.options.confirmOnBlur = opts.confirmOnBlur ?? true;
 		if (opts.suggestionTemplate) {
 			this.options.suggestionTemplate = opts.suggestionTemplate;
 		}
@@ -247,7 +249,33 @@ class Autocomplete {
 			 * @returns {void}
 			 */
 			this.options.source = (query, populateOptions) => {
-				showLoadingPane(this);
+				// One way this function can be invoked is following a clearButton click event.
+
+				// The consumer-provided `customSource()` function can be wrapped in `debounce()`, creating the potential
+				// for a user-defined delay between the invocation of the `customSource()` and `callback()` functions.
+				// This delay could be longer than the 100ms frequency at which accessible-autocomplete polls the value of the input.
+
+				// The following code blocks accommodate the coincident of these circumstances.
+
+				// A clearButton click event will hide the loading pane and set the input value as an empty string.
+				if (query) {
+					// Therefore only show the loading pane if a `query` (i.e. input) value is present
+					// so as to avoid temporarily re-showing the loading pane prior to this function's callback hiding it once again.
+					showLoadingPane(this);
+				}
+
+				// A clearButton click event will blur the input field, resulting in the listbox of options becoming hidden
+				// (but without de-populating the options).
+				if (!query) {
+					// If the accessible-autocomplete poll occurs after a clearButton click event
+					// but before this function's callback is invoked then the listbox and its options will be re-displayed.
+					// When the callback eventually runs, it will de-populate the options, consequently re-hiding the listbox.
+					// To prevent this, in the event of no `query` value being present
+					// (where, logically, there will be no corresponding options),
+					// immediately de-populate the options rather than waiting for the callback to do so.
+					populateOptions([]);
+				}
+
 				/**
 				 * @param {Array<string>} options - The options which match the rext which was typed into the autocomplete by the user
 				 * @returns {void}
@@ -281,11 +309,12 @@ class Autocomplete {
 						this.options.onConfirm(option);
 					}
 				},
+				confirmOnBlur: this.options.confirmOnBlur,
 				source: this.options.source,
 				cssNamespace: 'o-autocomplete',
 				displayMenu: 'overlay',
 				defaultValue: this.options.defaultValue || '',
-				showNoOptionsFound: false,
+				showNoOptionsFound: this.options.showNoOptionsFound,
 				autoselect: this.options.autoselect || false,
 				templates: {
 					/**
@@ -381,7 +410,7 @@ class Autocomplete {
 				placeholder: '',
 				cssNamespace: 'o-autocomplete',
 				displayMenu: 'overlay',
-				showNoOptionsFound: false,
+				showNoOptionsFound: this.options.showNoOptionsFound,
 				templates: {
 					suggestion: this.suggestionTemplate.bind(this)
 				}