diff --git a/cypress/integration/edit.js b/cypress/integration/edit.js index 01571880ca3..29121a5da28 100644 --- a/cypress/integration/edit.js +++ b/cypress/integration/edit.js @@ -78,6 +78,29 @@ describe('Edit Page', () => { ); }); + it('should allow to select an item from the AutocompleteInput without showing the choices again after', () => { + EditCommentPage.navigate(); + cy.get(EditCommentPage.elements.input('post_id')).clear().type('Sed quo'); + cy.get('[role="tooltip"]').within(() => { + cy.contains('Accusantium qui nihil voluptatum quia voluptas maxime ab similique'); + cy.contains('Sed quo et et fugiat modi').click(); + }); + cy.get('[role="tooltip"]').should(el => expect(el).to.not.exist); + + // Ensure it does not reappear a little after + cy.wait(500); + cy.get('[role="tooltip"]').should(el => expect(el).to.not.exist); + + // Ensure they still appear when needed though + cy.get(EditCommentPage.elements.input('post_id')).clear().type('architecto aut'); + cy.get('[role="tooltip"]').within(() => { + cy.contains('Sed quo et et fugiat modi'); + cy.contains('Sint dignissimos in architecto aut'); + cy.contains('A voluptas eius eveniet ut commodi dolor'); + }); + + }); + it('should reset the form correctly when switching from edit to create', () => { EditPostPage.navigate(); cy.get(EditPostPage.elements.input('title')).should(el => diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.js b/packages/ra-ui-materialui/src/input/AutocompleteInput.js index d2de222da96..00b9df05471 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.js +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.js @@ -102,6 +102,7 @@ export class AutocompleteInput extends React.Component { suggestions: [], }; + ignoreNextChoicesUpdate = false; inputEl = null; anchorEl = null; @@ -136,9 +137,15 @@ export class AutocompleteInput extends React.Component { : this.props.choices, prevSuggestions: false, }); + // Avoid displaying the suggestions again when one just has been selected + this.ignoreNextChoicesUpdate = true; // Ensure to reset the filter this.updateFilter(''); } else if (!isEqual(choices, this.props.choices)) { + if (this.ignoreNextChoicesUpdate) { + this.ignoreNextChoicesUpdate = false; + return; + } const selectedItem = this.getSelectedItem( nextProps, this.state.inputValue