@financial-times/o-autocomplete 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [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/package.json

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

package/src/js/autocomplete.js

@@ -209,6 +209,7 @@ class Autocomplete {
 		if (opts.onConfirm) {
 			this.options.onConfirm = opts.onConfirm;
 		}
+		this.options.showNoOptionsFound = opts.showNoOptionsFound || false;
 		if (opts.suggestionTemplate) {
 			this.options.suggestionTemplate = opts.suggestionTemplate;
 		}
@@ -247,7 +248,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}
@@ -285,7 +312,7 @@ class Autocomplete {
 				cssNamespace: 'o-autocomplete',
 				displayMenu: 'overlay',
 				defaultValue: this.options.defaultValue || '',
-				showNoOptionsFound: false,
+				showNoOptionsFound: this.options.showNoOptionsFound,
 				autoselect: this.options.autoselect || false,
 				templates: {
 					/**
@@ -381,7 +408,7 @@ class Autocomplete {
 				placeholder: '',
 				cssNamespace: 'o-autocomplete',
 				displayMenu: 'overlay',
-				showNoOptionsFound: false,
+				showNoOptionsFound: this.options.showNoOptionsFound,
 				templates: {
 					suggestion: this.suggestionTemplate.bind(this)
 				}