Merge pull request #3864 from 10up/fix/3824

Don't open instant results modal if an autosuggest suggestion is selected.

assets/js/autosuggest/index.js

@@ -362,6 +362,8 @@ function updateAutosuggestBox(options, input) {
 		}
 	});
 
+	setInputActiveDescendant('', input);
+
 	return true;
 }
 
@@ -373,6 +375,7 @@ 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) => {
@@ -387,6 +390,9 @@ function hideAutosuggestBox() {
 		container.style = 'display: none;';
 	});
 
+	// Remove active descendant attribute from all inputs
+	inputs.forEach((input) => setInputActiveDescendant('', input));
+
 	return true;
 }
 

assets/js/instant-results/apps/modal.js

@@ -49,6 +49,15 @@ export default () => {
 
 			inputRef.current = event.target.s;
 
+			/**
+			 * Don't open the modal if an autosuggest suggestion is selected.
+			 */
+			const activeDescendant = inputRef.current.getAttribute('aria-activedescendant');
+
+			if (activeDescendant) {
+				return;
+			}
+
 			const { value } = inputRef.current;
 			const post_type = getPostTypesFromForm(inputRef.current.form);
 

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

@@ -4,6 +4,7 @@ describe('Autosuggest Feature', () => {
 	});
 
 	beforeEach(() => {
+		cy.maybeDisableFeature('instant-results');
 		cy.deactivatePlugin('custom-headers-for-autosuggest', 'wpCli');
 	});
 
@@ -102,4 +103,11 @@ describe('Autosuggest Feature', () => {
 		cy.get('.ep-autosuggest li a').first().click();
 		cy.url().should('include', 'cypress=foobar');
 	});
+
+	it('Can select an Autosuggest suggestion even if Instant Results is active', () => {
+		cy.maybeEnableFeature('instant-results');
+		cy.visit('/');
+		cy.get('.wp-block-search__input').type('blog{downArrow}{enter}');
+		cy.url().should('include', 'blog');
+	});
 });