Merge pull request #4064 from 10up/feature/3482

Display autosuggest results on focus back, return to input on key up if first item.

assets/js/autosuggest/index.js

@@ -391,7 +391,6 @@ function updateAutosuggestBox(options, input) {
 function hideAutosuggestBox() {
 	const lists = document.querySelectorAll('.autosuggest-list');
 	const containers = document.querySelectorAll('.ep-autosuggest');
-	const inputs = document.querySelectorAll('.ep-autosuggest-container [aria-activedescendant]');
 
 	// empty all EP results lists
 	lists.forEach((list) => {
@@ -406,12 +405,19 @@ function hideAutosuggestBox() {
 		container.style = 'display: none;';
 	});
 
-	// Remove active descendant attribute from all inputs
-	inputs.forEach((input) => setInputActiveDescendant('', input));
+	hideInputActiveDescendant();
 
 	return true;
 }
 
+/**
+ * Remove active descendant attribute from all inputs.
+ */
+const hideInputActiveDescendant = () => {
+	const inputs = document.querySelectorAll('.ep-autosuggest-container [aria-activedescendant]');
+	inputs.forEach((input) => setInputActiveDescendant('', input));
+};
+
 /**
  * Checks for any manually ordered posts and puts them in the correct place
  *
@@ -491,7 +497,7 @@ function init() {
 
 	// to be used by the handleUpDown function
 	// to keep track of the currently selected result
-	let currentIndex;
+	let currentIndex = -1;
 
 	// these are the keycodes we listen for in handleUpDown,
 	// and in handleKeyup
@@ -552,14 +558,14 @@ function init() {
 		// if enter, navigate to that element
 		switch (event.keyCode) {
 			case 38: // Up
-				// don't go less than the 0th index
-				currentIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : 0;
+				currentIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : -1;
+				hideInputActiveDescendant();
 				deSelectResults();
 				break;
 			case 40: // Down
-				if (typeof currentIndex === 'undefined') {
-					// index is not yet defined, so let's
-					// start with the first one
+				if (currentIndex === -1) {
+					// -1 means we are at the search input
+					// manually move the index to the first one when pressing down.
 					currentIndex = 0;
 				} else {
 					const current = getSelectedResultIndex();
@@ -671,23 +677,36 @@ function init() {
 
 			if (response && response._shards && response._shards.successful > 0) {
 				const hits = checkForOrderedPosts(response.hits.hits, searchText);
+				cachedAutosuggestResults = hits;
 
-				if (hits.length === 0) {
-					hideAutosuggestBox();
-				} else {
-					updateAutosuggestBox(hits, input);
-				}
+				toggleAutosuggest(hits, input);
 			} else {
 				hideAutosuggestBox();
 			}
 
 			setFormIsLoading(false, input);
 		} else if (searchText.length === 0) {
+			cachedAutosuggestResults = false;
 			hideAutosuggestBox();
 		}
 	};
 
+	/**
+	 * Toggle Autosuggest.
+	 *
+	 * @param {hits} hits - ES result.
+	 * @param {input} input - HTML Input field.
+	 */
+	const toggleAutosuggest = (hits, input) => {
+		if (hits.length === 0) {
+			hideAutosuggestBox();
+		} else {
+			updateAutosuggestBox(hits, input);
+		}
+	};
+
 	const debounceFetchResults = debounce(fetchResults, 200);
+	let cachedAutosuggestResults;
 
 	/**
 	 * Callback for keyup in Autosuggest container.
@@ -817,8 +836,19 @@ function init() {
 		 *
 		 * blur
 		 * hide the autosuggest box
+		 *
+		 * focus
+		 * use the cached results from keyup to show the autosuggest box
 		 */
 		input.addEventListener('keyup', handleKeyup);
+		input.addEventListener('focus', () => {
+			const searchText = input.value;
+			if (!cachedAutosuggestResults || searchText.length === 0) {
+				return;
+			}
+
+			toggleAutosuggest(cachedAutosuggestResults, input);
+		});
 		input.addEventListener('blur', function () {
 			window.setTimeout(hideAutosuggestBox, 300);
 		});

tests/cypress/integration/features/autosuggest.cy.js

@@ -34,6 +34,16 @@ describe('Autosuggest Feature', () => {
 			expect($autosuggestList).to.be.visible;
 			expect($autosuggestList[0].innerText).to.contains('Markup: HTML Tags and Formatting');
 		});
+
+		cy.get('.wp-block-search__button').focus();
+		cy.get('.wp-block-search__input').click();
+		cy.get('.wp-block-search__input').focus();
+
+		cy.get('.ep-autosuggest').should(($autosuggestList) => {
+			// eslint-disable-next-line no-unused-expressions
+			expect($autosuggestList).to.be.visible;
+			expect($autosuggestList[0].innerText).to.contains('Markup: HTML Tags and Formatting');
+		});
 	});
 
 	it('Can find post by category in autosuggest list', () => {