diff --git a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx index 375fe099fa7b..4df8057ff5e9 100644 --- a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx +++ b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx @@ -124,7 +124,7 @@ describe("Multi Input on mobile device", () => { .find(".ui5-input-inner") .realClick(); - cy.get("@popover") + cy.get("@popover") .ui5ResponsivePopoverOpened(); // Assert: Button should be enabled after adding a token diff --git a/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx b/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx index be7344dd308b..23a65bab0f7c 100644 --- a/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx +++ b/packages/main/cypress/specs/Tokenizer.mobile.cy.tsx @@ -1,7 +1,9 @@ import Tokenizer from "../../src/Tokenizer.js"; import Button from "../../src/Button.js"; import Token from "../../src/Token.js"; -import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, TOKENIZER_POPOVER_REMOVE } from "../../src/generated/i18n/i18n-defaults.js"; +import { TOKENIZER_DIALOG_OK_BUTTON, TOKENIZER_DIALOG_CANCEL_BUTTON, INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js"; +import Label from "../../src/Label.js"; +import ResponsivePopover from "../../src/ResponsivePopover.js"; describe("Phone mode", () => { beforeEach(() => { @@ -133,7 +135,7 @@ describe("Phone mode", () => { cy.get("@nMoreDialog") .find(".ui5-responsive-popover-header .ui5-responsive-popover-header-text") - .should("have.text", TOKENIZER_POPOVER_REMOVE.defaultText); + .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText); }); it("Should fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and confirmed with OK", () => { @@ -213,6 +215,7 @@ describe("Phone mode", () => { cy.get("@tokenDeleteSpy") .should("not.have.been.called"); }); + it("Should NOT fire the ui5-token-delete event when the 'X' is pressed in the n-more picker and canceled", () => { cy.mount( @@ -255,4 +258,69 @@ describe("Phone mode", () => { cy.get("@tokenDeleteSpy") .should("not.have.been.called"); }); + + it("Should test popover title when accessibleName is set", () => { + cy.mount( + <> + + + + + + + ); + + cy.get("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("nMoreLabel"); + + cy.get("@nMoreLabel") + .realClick(); + + cy.get("[ui5-tokenizer]") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleName is present, it should be used as the mobile dialog title + cy.get("[ui5-tokenizer]") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Animals"); + }); + + it("Should test popover title when accessibleNameRef is set", () => { + cy.mount( + <> + + + + + + + + ); + + cy.get("[ui5-tokenizer]") + .shadow() + .find(".ui5-tokenizer-more-text") + .as("nMoreLabel"); + + cy.get("@nMoreLabel") + .realClick(); + + cy.get("[ui5-tokenizer]") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover") + .ui5ResponsivePopoverOpened(); + + // When accessibleNameRef is present, it should be used as the mobile dialog title + cy.get("[ui5-tokenizer]") + .shadow() + .find("[ui5-responsive-popover] [slot='header'] [ui5-title]") + .should("have.text", "Countries"); + }); }) \ No newline at end of file diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx index 6cf58720ca6b..0393b075a1f3 100644 --- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx +++ b/packages/main/src/MultiComboBoxPopoverTemplate.tsx @@ -10,6 +10,7 @@ import List from "./List.js"; import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js"; import Popover from "./Popover.js"; import CheckBox from "./CheckBox.js"; +import Title from "./Title.js"; import BusyIndicator from "./BusyIndicator.js"; export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { @@ -39,7 +40,13 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) { {!this.loading && this._isPhone && <>
- {this._headerTitleText} + + {this._headerTitleText} +
JsxTemplateResult, mobileHeader?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) { const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList; @@ -35,7 +36,13 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti <>
- {this._headerTitleText} + + {this._headerTitleText} +
@@ -75,7 +82,7 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
} - { this.showSuggestions && suggestionsList.call(this) } + {this.showSuggestions && suggestionsList.call(this)} {this._isPhone &&