diff --git a/assets/js/autosuggest/index.js b/assets/js/autosuggest/index.js index 7b8cad072c..cd035ac25b 100644 --- a/assets/js/autosuggest/index.js +++ b/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; } diff --git a/assets/js/instant-results/apps/modal.js b/assets/js/instant-results/apps/modal.js index 69aef353ad..11e5ed82e9 100644 --- a/assets/js/instant-results/apps/modal.js +++ b/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); diff --git a/tests/cypress/integration/features/autosuggest.cy.js b/tests/cypress/integration/features/autosuggest.cy.js index f766dd08ea..3e4e248b08 100644 --- a/tests/cypress/integration/features/autosuggest.cy.js +++ b/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'); + }); });