diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js index da31bc8fb..7b7f3b703 100644 --- a/cypress/elements/shared/sharedElements.js +++ b/cypress/elements/shared/sharedElements.js @@ -24,6 +24,9 @@ export const SHARED_ELEMENTS = { }, warningDialog: '[data-test-id="warning-dialog"]', pageHeader: "[data-test-id='page-header']", + multiAutocomplete: { + selectedOptions: '[id*="selected-option-"]', + }, }; export const selectorWithDataValue = value => `[data-value="${value}"]`; diff --git a/cypress/support/customCommands/sharedElementsOperations/selects.js b/cypress/support/customCommands/sharedElementsOperations/selects.js index 7a5e984ef..78b575134 100644 --- a/cypress/support/customCommands/sharedElementsOperations/selects.js +++ b/cypress/support/customCommands/sharedElementsOperations/selects.js @@ -19,7 +19,9 @@ Cypress.Commands.add("fillMultiSelect", (selectSelector, option) => { cy.fillAutocompleteSelect(selectSelector, option).then(returnedOption => { cy.get(SHARED_ELEMENTS.header) .first() - .click({ force: true }); + .click({ force: true }) + .get(SHARED_ELEMENTS.multiAutocomplete.selectedOptions) + .should("be.visible"); return cy.wrap(returnedOption); }); }); diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 904ad72c7..b6bf52bbf 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -228,7 +228,11 @@ const MultiAutocompleteSelectFieldComponent: React.FC
{displayValues.map(value => ( -
+