diff --git a/packages/main/cypress/specs/Input.mobile.cy.tsx b/packages/main/cypress/specs/Input.mobile.cy.tsx index 31be35f278d8..1c2bfffff702 100644 --- a/packages/main/cypress/specs/Input.mobile.cy.tsx +++ b/packages/main/cypress/specs/Input.mobile.cy.tsx @@ -2,7 +2,8 @@ import Input from "../../src/Input.js"; import "../../src/features/InputSuggestions.js"; import type ResponsivePopover from "../../src/ResponsivePopover.js"; import SuggestionItem from "../../src/SuggestionItem.js"; -import { INPUT_SUGGESTIONS_OK_BUTTON, INPUT_SUGGESTIONS_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js"; +import { INPUT_SUGGESTIONS_OK_BUTTON, INPUT_SUGGESTIONS_CANCEL_BUTTON, INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js"; +import Label from "../../src/Label.js"; describe("Input on mobile device", () => { beforeEach(() => { @@ -442,3 +443,54 @@ describe("Property open", () => { .ui5ResponsivePopoverClosed(); }); }); + +describe("Dialog header title", () => { + beforeEach(() => { + cy.ui5SimulateDevice("phone"); + }); + + it("Should display label text as dialog header title when label for is used", () => { + cy.mount( + <> + + + + + + + ); + + cy.get("#myInput").realClick(); + + cy.get("#myInput") + .shadow() + .find("[ui5-responsive-popover]") + .ui5ResponsivePopoverOpened(); + + cy.get("#myInput") + .shadow() + .find("[ui5-responsive-popover] .ui5-responsive-popover-header-text") + .should("have.text", "Country"); + }); + + it("Should fallback to 'All Items' when no label is associated", () => { + cy.mount( + + + + + ); + + cy.get("#myInput").realClick(); + + cy.get("#myInput") + .shadow() + .find("[ui5-responsive-popover]") + .ui5ResponsivePopoverOpened(); + + cy.get("#myInput") + .shadow() + .find("[ui5-responsive-popover] .ui5-responsive-popover-header-text") + .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText); + }); +}); diff --git a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx index 4df8057ff5e9..416a5cf2b8d7 100644 --- a/packages/main/cypress/specs/MultiInput.mobile.cy.tsx +++ b/packages/main/cypress/specs/MultiInput.mobile.cy.tsx @@ -4,6 +4,8 @@ import SuggestionItem from "../../src/SuggestionItem.js"; import Button from "../../src/Button.js"; import "../../src/features/InputSuggestions.js"; import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js"; +import { INPUT_SUGGESTIONS_TITLE } from "../../src/generated/i18n/i18n-defaults.js"; +import Label from "../../src/Label.js"; const createTokenFromText = (text: string): HTMLElement => { const token = document.createElement("ui5-token"); @@ -213,3 +215,60 @@ describe("Multi Input on mobile device", () => { }); }); }); + +describe("Dialog header title", () => { + beforeEach(() => { + cy.ui5SimulateDevice("phone"); + }); + + it("Should display label text as dialog header title when label for is used", () => { + cy.mount( + <> + + + + + + + ); + + cy.get("#myMultiInput") + .shadow() + .find(".ui5-input-inner") + .realClick(); + + cy.get("#myMultiInput") + .shadow() + .find("[ui5-responsive-popover]") + .ui5ResponsivePopoverOpened(); + + cy.get("#myMultiInput") + .shadow() + .find("[ui5-responsive-popover] .ui5-responsive-popover-header-text") + .should("have.text", "Tags"); + }); + + it("Should fallback to 'All Items' when no label is associated", () => { + cy.mount( + + + + + ); + + cy.get("#myMultiInput") + .shadow() + .find(".ui5-input-inner") + .realClick(); + + cy.get("#myMultiInput") + .shadow() + .find("[ui5-responsive-popover]") + .ui5ResponsivePopoverOpened(); + + cy.get("#myMultiInput") + .shadow() + .find("[ui5-responsive-popover] .ui5-responsive-popover-header-text") + .should("have.text", INPUT_SUGGESTIONS_TITLE.defaultText); + }); +}); diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index a17b552cb953..344431f872d0 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -1760,7 +1760,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement } get _headerTitleText() { - return Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); + return this._associatedLabelsTexts || Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } get _suggestionsOkButtonText() {