diff --git a/packages/main/cypress/specs/MultiInput.cy.tsx b/packages/main/cypress/specs/MultiInput.cy.tsx index f697aa349a7d..fdc0062981ee 100644 --- a/packages/main/cypress/specs/MultiInput.cy.tsx +++ b/packages/main/cypress/specs/MultiInput.cy.tsx @@ -8,7 +8,7 @@ import ResponsivePopover from "../../src/ResponsivePopover.js"; import SuggestionItemCustom from "../../src/SuggestionItemCustom.js"; import { MULTIINPUT_VALUE_HELP } from "../../src/generated/i18n/i18n-defaults.js"; import { TOKENIZER_SHOW_ALL_ITEMS } from "../../src/generated/i18n/i18n-defaults.js"; -import { MULTIINPUT_SHOW_MORE_TOKENS } from "../../src/generated/i18n/i18n-defaults.js"; +import { MULTIINPUT_SHOW_MORE_TOKENS, LIST_ITEM_POSITION } from "../../src/generated/i18n/i18n-defaults.js"; const createTokenFromText = (text: string): HTMLElement => { const token = document.createElement("ui5-token"); @@ -920,6 +920,52 @@ describe("ARIA attributes", () => { .find("input") .should("have.attr", "aria-haspopup", "dialog"); }); + + it.only("announces correct suggestion position when selecting a suggestion with Enter", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-multi-input]") + .then(multiInput => { + multiInput[0].addEventListener("keydown", (event: KeyboardEvent) => { + const inputElement = multiInput[0] as HTMLInputElement; + if (event.key === "Enter" && inputElement.value) { + const token = createTokenFromText(inputElement.value); + inputElement.appendChild(token); + inputElement.value = ""; + } + }); + }) + + cy.get("[ui5-multi-input]") + .realClick(); + + cy.realType("a"); + cy.realPress("ArrowDown"); + + cy.get("[ui5-multi-input]") + .then(($mi) => { + const i18nBundle = ($mi[0].constructor as any).i18nBundle; + const miSelectionText = i18nBundle.getText(LIST_ITEM_POSITION.defaultText, 2, 3); + + cy.get("[ui5-multi-input]") + .shadow() + .find("#selectionText") + .as("selectionText") + .should("have.text", `${miSelectionText}`); + }); + + cy.realPress("Enter"); + + cy.get("@selectionText") + .should("have.text", ""); + + }); }) describe("Keyboard handling", () => { diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index bfc26327cf29..f053fb79f922 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -1383,8 +1383,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } _afterClosePicker() { - this.announceSelectedItem(); - // close device's keyboard and prevent further typing if (isPhone()) { this.blur(); @@ -1405,6 +1403,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement if (this.hasSuggestionItemSelected) { this.focus(); } + + const invisibleText = this.shadowRoot!.querySelector(`#selectionText`); + if (invisibleText) { + invisibleText.textContent = ""; + } + this._handlePickerAfterClose(); } diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts index e6511090ee50..69ba840865eb 100644 --- a/packages/main/src/features/InputSuggestions.ts +++ b/packages/main/src/features/InputSuggestions.ts @@ -472,7 +472,7 @@ class Suggestions { const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos || 0, this.accInfo.listSize || 0); - return `${this.accInfo.additionalText} ${itemPositionText}`; + return `${this.accInfo.additionalText} ${itemPositionText}`.trim(); } hightlightInput(text: string, input: string) {