@ui5/webcomponents 2.9.0-rc.2 → 2.9.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.3...v2.9.0) (2025-04-04)
+
+
+### Bug Fixes
+
+* **ui5-multi-input:** announce value help ([#11221](https://github.com/SAP/ui5-webcomponents/issues/11221)) ([bdc746a](https://github.com/SAP/ui5-webcomponents/commit/bdc746a043489077daa5dd1a700067c028e4c489))
+* **ui5-select:** align option font size with field ([#11255](https://github.com/SAP/ui5-webcomponents/issues/11255)) ([dc8ff89](https://github.com/SAP/ui5-webcomponents/commit/dc8ff89263a72cd6c59d8011a6be410f884a1344)), closes [#11163](https://github.com/SAP/ui5-webcomponents/issues/11163)
+
+
+
+
+
+# [2.9.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.2...v2.9.0-rc.3) (2025-04-03)
+
+
+### Bug Fixes
+
+* **framework:** fix fetching "id" (indonesian) language ([#11251](https://github.com/SAP/ui5-webcomponents/issues/11251)) ([9a36df5](https://github.com/SAP/ui5-webcomponents/commit/9a36df5dc2191758abd665d6fb1014d645e322f7)), closes [#11233](https://github.com/SAP/ui5-webcomponents/issues/11233)
+* **ui5-avatar-group:** correct automatic colorScheme ([#11181](https://github.com/SAP/ui5-webcomponents/issues/11181)) ([be8925d](https://github.com/SAP/ui5-webcomponents/commit/be8925de1674aae140d9f81591ce5e50420f7ff7)), closes [#11113](https://github.com/SAP/ui5-webcomponents/issues/11113)
+* **ui5-calendar:** fix month timestamp calculations ([#11226](https://github.com/SAP/ui5-webcomponents/issues/11226)) ([99ce641](https://github.com/SAP/ui5-webcomponents/commit/99ce6417e9bd8f66ddbb1b88c5c42fcd813e0abb)), closes [#11222](https://github.com/SAP/ui5-webcomponents/issues/11222)
+* **ui5-calendar:** remove auto focus of current day on initial render ([#11213](https://github.com/SAP/ui5-webcomponents/issues/11213)) ([e57ab28](https://github.com/SAP/ui5-webcomponents/commit/e57ab2884890220b1179cde77d4dcf76f630cfbc)), closes [#10728](https://github.com/SAP/ui5-webcomponents/issues/10728)
+* **ui5-date-picker:** display value state message in the value help ([#10919](https://github.com/SAP/ui5-webcomponents/issues/10919)) ([87eaa35](https://github.com/SAP/ui5-webcomponents/commit/87eaa359d2a643868f0e4a6f399376601ea32e94))
+* **ui5-input:** change event firing after clear icon click ([#11147](https://github.com/SAP/ui5-webcomponents/issues/11147)) ([a02d941](https://github.com/SAP/ui5-webcomponents/commit/a02d941d4a97b1810d6bbb88ee74a29acd2e781d))
+* **ui5-select:** add listbox role to meet ARIA parent-child requirements ([#11156](https://github.com/SAP/ui5-webcomponents/issues/11156)) ([dcb4edc](https://github.com/SAP/ui5-webcomponents/commit/dcb4edcf972376f343046dd651e3cd82a78307ed)), closes [#11151](https://github.com/SAP/ui5-webcomponents/issues/11151) [#11152](https://github.com/SAP/ui5-webcomponents/issues/11152)
+
+
+### Features
+
+* **ui5-select:** enhance `value` property ([#10904](https://github.com/SAP/ui5-webcomponents/issues/10904)) ([23707c5](https://github.com/SAP/ui5-webcomponents/commit/23707c57dee10e6d206b1ac04f5907f775dc20d7))
+
+
+
+
+
 # [2.9.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.9.0-rc.1...v2.9.0-rc.2) (2025-03-27)
 
 

package/cypress/specs/AvatarGroup.cy.tsx

@@ -35,7 +35,7 @@ describe("Overflow", () => {
 	});
 });
 
-describe("Avatars arrangement", () => {
+describe("Avatars", () => {
 	it("checks if no unnecessary margin is applied of only one Avatar is available", () => {
 		cy.mount(<AvatarGroup id="ag2" type="Group">
 			<Avatar id="av1" initials="II"></Avatar>
@@ -48,4 +48,19 @@ describe("Avatars arrangement", () => {
 			.invoke("attr", "style")
 			.should("equal", "");
 	});
+
+
+	it("tests if _color-scheme attribute is automatically set to avatars", () => {
+		const avatarCount = 20;
+		cy.mount(<AvatarGroup id="ag" type="Group">
+			{Array.from({ length: avatarCount }, (_, i) => {
+				return <Avatar initials="II"></Avatar>;
+			})}
+		</AvatarGroup>);
+
+		Array.from({ length: avatarCount }, (_, i) => {
+			const index = (i % 10) + 1;
+			cy.get("ui5-avatar").eq(i).should("have.attr", "_color-scheme", `Accent${index}`);
+		});
+	});
 });

package/cypress/specs/Calendar.cy.tsx

@@ -7,14 +7,15 @@ import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
 
 const getDefaultCalendar = (date: Date) => {
 	const calDate = new Date(date);
-	const formattedDate = calDate.toLocaleDateString("default", {
-		year: "numeric",
-		month: "short",
-		day: "numeric",
-	});
 
-	return (<Calendar id="calendar1" timestamp={calDate.valueOf() / 1000}>
-		<CalendarDate value={formattedDate}></CalendarDate>
+	const day = String(calDate.getDate()).padStart(2, "0");
+	const month = String(calDate.getMonth() + 1).padStart(2, "0"); // Months are 0-based
+	const year = calDate.getFullYear();
+
+	const value = `${day}/${month}/${year}`;
+
+	return (<Calendar id="calendar1" timestamp={calDate.valueOf() / 1000} formatPattern="dd/MM/yyyy">
+		<CalendarDate value={value}></CalendarDate>
 	</Calendar>);
 };
 
@@ -38,35 +39,41 @@ describe("Calendar general interaction", () => {
 		cy.mount(getDefaultCalendar(date));
 
 		cy.ui5CalendarGetDay("#calendar1", "974851200")
-			.should("have.focus");
+			.as("selectedDay");
 
-		cy.focused().realPress("Tab");
+		cy.get("@selectedDay")
+			.realClick();
+
+		cy.get("@selectedDay")
+			.should("have.focus")
+			.realPress("Tab");
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
 			.find(".ui5-calheader")
+			.as("calheader");
+		
+		cy.get("@calheader")
 			.find("[data-ui5-cal-header-btn-month]")
-			.should("have.focus");
-
-		cy.focused().realPress("Tab");
+			.as("monthBtn");
+		
+		cy.get("@monthBtn")
+			.should("have.focus")
+			.realPress("Tab");
 
-		cy.get<Calendar>("#calendar1")
-			.shadow()
-			.find(".ui5-calheader")
+		cy.get("@calheader")
 			.find("[data-ui5-cal-header-btn-year]")
-			.should("have.focus");
-
-		cy.focused().realPress(["Shift", "Tab"]);
-
-		cy.get<Calendar>("#calendar1")
-			.shadow()
-			.find(".ui5-calheader")
-			.find("[data-ui5-cal-header-btn-month]")
-			.should("have.focus");
+			.as("yearBtn");
+		
+		cy.get("@yearBtn")
+			.should("have.focus")
+			.realPress(["Shift", "Tab"]);
 
-		cy.focused().realPress(["Shift", "Tab"]);
+		cy.get("@monthBtn")
+			.should("have.focus")
+			.realPress(["Shift", "Tab"]);
 
-		cy.ui5CalendarGetDay("#calendar1", "974851200")
+		cy.get("@selectedDay")
 			.should("have.focus");
 	});
 
@@ -79,7 +86,7 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-year]")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
@@ -98,7 +105,7 @@ describe("Calendar general interaction", () => {
 		cy.mount(getDefaultCalendar(date));
 
 		cy.ui5CalendarGetDay("#calendar1", "974851200")
-			.click();
+			.realClick();
 
 		cy.focused().realPress("Tab");
 		cy.focused().realPress("Space");
@@ -125,7 +132,7 @@ describe("Calendar general interaction", () => {
 		cy.mount(getDefaultCalendar(date));
 
 		cy.ui5CalendarGetDay("#calendar1", "974851200")
-			.click();
+			.realClick();
 
 		cy.focused().realPress("Tab");
 		cy.focused().realPress("Tab");
@@ -158,7 +165,7 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-year]")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar2")
 			.shadow()
@@ -179,7 +186,7 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-month]")
-			.click();
+			.realClick();
 
 		cy.ui5CalendarGetMonth("#calendar2", todayTimestamp.toString())
 			.should("have.focus")
@@ -195,7 +202,7 @@ describe("Calendar general interaction", () => {
 			.find("[ui5-daypicker]")
 			.shadow()
 			.find("[tabindex='0']")
-			.click();
+			.realClick();
 
 		cy.focused().realPress("PageUp");
 
@@ -223,7 +230,7 @@ describe("Calendar general interaction", () => {
 			.find("[ui5-daypicker]")
 			.shadow()
 			.find("[tabindex='0']")
-			.click();
+			.realClick();
 
 		cy.focused().realPress(["Shift", "PageUp"]);
 
@@ -251,7 +258,7 @@ describe("Calendar general interaction", () => {
 			.find("[ui5-daypicker]")
 			.shadow()
 			.find("[tabindex='0']")
-			.click();
+			.realClick();
 
 		cy.focused().realPress(["Control", "Shift", "PageUp"]);
 
@@ -279,7 +286,7 @@ describe("Calendar general interaction", () => {
 			.find("[ui5-daypicker]")
 			.shadow()
 			.find("[tabindex='0']")
-			.click();
+			.realClick();
 
 		cy.focused().realPress("F4");
 		cy.focused().realPress("PageUp");
@@ -308,7 +315,7 @@ describe("Calendar general interaction", () => {
 			.find("[ui5-daypicker]")
 			.shadow()
 			.find("[tabindex='0']")
-			.click();
+			.realClick();
 
 		cy.focused().realPress(["Shift", "F4"]);
 		cy.focused().realPress("PageUp");
@@ -340,7 +347,7 @@ describe("Calendar general interaction", () => {
 			cy.ui5CalendarGetDay("#calendar1", _timestamp.toString())
 				.as("date");
 
-			cy.get("@date").click();
+			cy.get("@date").realClick();
 			cy.get("@date").should("have.class", "ui5-dp-item--selected");
 		});
 
@@ -381,10 +388,10 @@ describe("Calendar general interaction", () => {
 		const timestamps = [971740800, 971827200, 971913600];
 
 		cy.ui5CalendarGetDay("#calendar1", timestamps[0].toString())
-			.click();
+			.realClick();
 
 		cy.ui5CalendarGetDay("#calendar1", timestamps[2].toString())
-			.click();
+			.realClick();
 
 		cy.ui5CalendarGetDay("#calendar1", timestamps[0].toString())
 			.should("have.class", "ui5-dp-item--selected");
@@ -423,7 +430,7 @@ describe("Calendar general interaction", () => {
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-next]")
 			.should("not.have.class", "ui5-calheader-arrowbtn-disabled")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
@@ -441,13 +448,13 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-next]")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-next]")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
@@ -518,7 +525,7 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-month]")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
@@ -544,7 +551,7 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-year]")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
@@ -569,7 +576,7 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-year]")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
@@ -588,7 +595,7 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-year]")
-			.click();
+			.realClick();
 
 		cy.get<Calendar>("#calendar1")
 			.shadow()
@@ -619,10 +626,10 @@ describe("Calendar general interaction", () => {
 			.shadow()
 			.find(".ui5-calheader")
 			.find("[data-ui5-cal-header-btn-month]")
-			.click();
+			.realClick();
 
 		cy.ui5CalendarGetMonth("#calendar1", timestamp.toString())
-			.click();
+			.realClick();
 
 		cy.ui5CalendarGetDay("#calendar1", timestamp.toString())
 			.should("have.focus");

package/cypress/specs/DateControlsWithTimezone.cy.tsx

@@ -28,7 +28,7 @@ describe("Date related components in different timezone", () => {
 
 		cy.get("#datePickerNow")
 			.shadow()
-			.find("ui5-input")
+			.find("[ui5-datetime-input]")
 			.should("have.attr", "value", value);
 	});
 
@@ -69,7 +69,7 @@ describe("Date related components in different timezone", () => {
 
 		cy.get("#dateTimePickerNow")
 			.shadow()
-			.find("[ui5-input]")
+			.find("[ui5-datetime-input]")
 			.should("have.attr", "value", value);
 	});
 });

package/cypress/specs/DatePicker.cy.tsx

@@ -18,7 +18,7 @@ describe("Date Picker Tests", () => {
 
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("be.visible");
 
 		cy.get<DatePicker>("@datePicker")
@@ -97,12 +97,18 @@ describe("Date Picker Tests", () => {
 
 		cy.get("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("have.attr", "value-state", "Negative");
+		
+		cy.get("@datePicker")
+			.shadow()
+			.find("[slot='header']")
+			.first()
+			.should("have.text", "Invalid entry");
 
 		cy.get("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find(".ui5-input-content")
 			.should("be.visible");
@@ -145,7 +151,7 @@ describe("Date Picker Tests", () => {
 		cy.get("[ui5-date-picker]")
 			.as("datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("have.attr", "required");
 
 		cy.get<DatePicker>("@datePicker")
@@ -902,7 +908,7 @@ describe("Date Picker Tests", () => {
 
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find(".ui5-input-content")
 			.should("be.visible");
@@ -924,7 +930,7 @@ describe("Date Picker Tests", () => {
 
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find(".ui5-input-content")
 			.should("be.visible");
@@ -960,7 +966,7 @@ describe("Date Picker Tests", () => {
 
 		cy.get<DatePicker>("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find(".ui5-input-content")
 			.should("be.visible");
@@ -1687,7 +1693,7 @@ describe("Legacy date customization and Islamic calendar type", () => {
 
 		cy.get("@datePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.should("have.attr", "value-state", "None");
 	});
 });

package/cypress/specs/DateRangePicker.cy.tsx

@@ -13,7 +13,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("invalid input")
@@ -21,6 +21,12 @@ describe("DateRangePicker general interaction", () => {
 
 		cy.get("@dateRangePicker")
 			.should("have.attr", "value-state", "Negative");
+
+		cy.get("@dateRangePicker")
+			.shadow()
+			.find("[slot='header']")
+			.first()
+			.should("have.text", "Invalid entry");
 	});
 
 	it("Custom Validation None", () => {
@@ -29,7 +35,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("09/09/2020 - 10/10/2020")
@@ -47,7 +53,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("09/09/2020 - 10/10/2020")
@@ -67,7 +73,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("Feb 25, 2022 @ Feb 28, 2022")
@@ -84,7 +90,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("27/09/2019 - 10/10/2019")
@@ -118,7 +124,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("05/08/2020 - 05/08/2020")
@@ -167,7 +173,7 @@ describe("DateRangePicker general interaction", () => {
 
 		cy.get("@dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -193,7 +199,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.as("input")
 			.realClick()
 			.should("be.focused")
@@ -233,7 +239,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.as("input")
 			.realClick()
 			.should("be.focused")
@@ -273,7 +279,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.as("input")
 			.realClick()
 			.should("be.focused")
@@ -309,7 +315,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("Jul 17, 2020 @ Jul 16, 2020")
@@ -325,7 +331,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("Jul 17, 2020 @ Jul 16, 2020")
@@ -341,7 +347,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("2020-09-09 - 2020-10-10")
@@ -365,7 +371,7 @@ describe("DateRangePicker general interaction", () => {
 
 		cy.get("@dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -412,7 +418,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -432,7 +438,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("09/06/2024 - 15/06/2024")
@@ -466,7 +472,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.shadow()
 			.find("input")
 			.realClick()
@@ -484,7 +490,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -507,7 +513,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("09.2024 - 11.2024")
@@ -538,7 +544,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realPress("F4");
@@ -561,7 +567,7 @@ describe("DateRangePicker general interaction", () => {
 		cy.get<DateRangePicker>("[ui5-daterange-picker]")
 			.as("dateRangePicker")
 			.shadow()
-			.find("ui5-input")
+			.find("ui5-datetime-input")
 			.realClick()
 			.should("be.focused")
 			.realType("0001 - 0006")