diff --git a/packages/main/cypress/specs/Select.mobile.cy.tsx b/packages/main/cypress/specs/Select.mobile.cy.tsx
index 50865ee08c27..6374d768a050 100644
--- a/packages/main/cypress/specs/Select.mobile.cy.tsx
+++ b/packages/main/cypress/specs/Select.mobile.cy.tsx
@@ -1,5 +1,7 @@
import Select from "../../src/Select.js";
import Option from "../../src/Option.js";
+import type ResponsivePopover from "../../src/ResponsivePopover.js";
+import { SELECT_DIALOG_CANCEL_BUTTON } from "../../src/generated/i18n/i18n-defaults.js";
describe("Select mobile general interaction", () => {
beforeEach(() => {
@@ -80,3 +82,64 @@ describe("Select mobile general interaction", () => {
cy.get("@select").should("have.prop", "value", "Cozy");
});
});
+
+describe("Select - mobile popover Cancel button", () => {
+ beforeEach(() => {
+ cy.ui5SimulateDevice("phone");
+ });
+
+ it("renders only the Cancel button in the footer (no X in header)", () => {
+ cy.mount(
+
+ );
+
+ cy.get("[ui5-select]").realClick();
+
+ cy.get("[ui5-select]")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .as("popover")
+ .ui5ResponsivePopoverOpened();
+
+ // Header has no close button anymore.
+ cy.get("@popover")
+ .find("[slot=header] .ui5-responsive-popover-close-btn")
+ .should("not.exist");
+
+ // Footer renders exactly one Cancel button.
+ cy.get("@popover")
+ .find(".ui5-responsive-popover-footer [ui5-button]")
+ .should("have.length", 1)
+ .and("have.class", "ui5-responsive-popover-close-btn")
+ .and("contain.text", SELECT_DIALOG_CANCEL_BUTTON.defaultText);
+ });
+
+ it("closes the mobile picker when the Cancel button is pressed", () => {
+ cy.mount(
+
+ );
+
+ cy.get("[ui5-select]").realClick();
+
+ cy.get("[ui5-select]")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .as("popover")
+ .ui5ResponsivePopoverOpened();
+
+ cy.get("@popover")
+ .find(".ui5-responsive-popover-footer [ui5-button]")
+ .realClick();
+
+ cy.get("[ui5-select]")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .ui5ResponsivePopoverClosed();
+ });
+});
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 3c83433e71f5..0840e00556ad 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -52,6 +52,7 @@ import {
INPUT_SUGGESTIONS_TITLE,
LIST_ITEM_POSITION,
SELECT_ROLE_DESCRIPTION,
+ SELECT_DIALOG_CANCEL_BUTTON,
FORM_SELECTABLE_REQUIRED,
} from "./generated/i18n/i18n-defaults.js";
import Label from "./Label.js";
@@ -1049,6 +1050,10 @@ class Select extends UI5Element implements IFormInputElement {
return Select.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
}
+ get _cancelButtonText() {
+ return Select.i18nBundle.getText(SELECT_DIALOG_CANCEL_BUTTON);
+ }
+
get _currentlySelectedOption() {
return this.options[this._selectedIndex];
}
diff --git a/packages/main/src/SelectPopoverTemplate.tsx b/packages/main/src/SelectPopoverTemplate.tsx
index 6a7626a2ef69..a98ea8ee87d9 100644
--- a/packages/main/src/SelectPopoverTemplate.tsx
+++ b/packages/main/src/SelectPopoverTemplate.tsx
@@ -4,7 +4,6 @@ import Button from "./Button.js";
import ResponsivePopover from "./ResponsivePopover.js";
import Popover from "./Popover.js";
import Icon from "./Icon.js";
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
import Title from "./Title.js";
export default function SelectPopoverTemplate(this: Select) {
@@ -33,11 +32,6 @@ export default function SelectPopoverTemplate(this: Select) {