fix(ui5-dynamic-date-range): selection of from value is working when there are previously submitted values (#13470)

When a FROMDATETIME, TODATETIME, or DATETIMERANGE option already had a committed value and the user reopened the picker to change it, the Calendar and DateTimePicker controls were always seeded from this.value (the committed value) instead of this.currentValue (the in-progress value). This caused every interaction inside the picker to snap back to the previously committed value, making it impossible to select a new date.

Fix FromDateTimeTemplate.tsx to read the current date from this.currentValue first, falling back to this.value only when no edit is in progress.

Fix DateTimeRangeTemplate.tsx with the same approach: prefer this.currentValue when its operator matches the current option, so both the "from" and "to" DateTimePickers reflect the in-progress edit rather than the last committed value.

Author: GDamyanov

packages/main/cypress/specs/DynamicDateRange.cy.tsx

@@ -324,7 +324,11 @@ describe("DynamicDateRange Last/Next Options", () => {
 		cy.get("@ddr")
 			.ui5DynamicDateRangeSubmit();
 
-		cy.get("@innerInput")
+		cy.get("@ddr")
+			.shadow()
+			.find("[ui5-input]")
+			.shadow()
+			.find("input")
 			.should("have.value", "Last 7 Days");
 	});
 
@@ -538,6 +542,72 @@ describe("FromDateTime Option", () => {
 		cy.get("@input")
 			.should("contain.value", "From Oct 13, 2025");
 	});
+
+	it("should allow selecting a new date when a previous FromDateTime value exists", () => {
+		const mockOptions: Array<IDynamicDateRangeOption> = [
+			new FromDateTime(),
+		];
+		cy.get("[ui5-dynamic-date-range]")
+			.as("ddr")
+			.ui5DynamicDateRangeOpen()
+			.ui5DynamicDateRangeSetInput("Oct 1, 2025, 0:30:00 PM")
+			.ui5DynamicDateRangeSelectOption();
+
+		cy.get("@ddr")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.as("popover");
+		
+		cy.get("@popover")
+			.find("[ui5-calendar]")
+			.as("calendar");
+
+		cy.get("@calendar")
+			.shadow()
+			.find("ui5-daypicker")
+			.shadow()
+			.find(".ui5-dp-daytext")
+			.eq(15)
+			.realClick(); // Select day 13
+		
+		cy.get("@ddr")
+			.ui5DynamicDateRangeSubmit();
+
+		 cy.get("@ddr")
+			.shadow()
+			.find("[ui5-input]")
+			.as("input");
+
+		cy.get("@input")
+			.should("contain.value", "From Oct 13, 2025");
+
+		cy.get("@ddr")
+			.ui5DynamicDateRangeOpen()
+			.ui5DynamicDateRangeSelectOption();
+
+		cy.get("@popover")
+			.find("[ui5-calendar]")
+			.as("calendar");
+
+		cy.get("@calendar")
+			.shadow()
+			.find("ui5-daypicker")
+			.shadow()
+			.find(".ui5-dp-daytext")
+			.eq(16)
+			.realClick(); // Select day 14
+		
+		cy.get("@ddr")
+			.ui5DynamicDateRangeSubmit();
+
+		 cy.get("@ddr")
+			.shadow()
+			.find("[ui5-input]")
+			.as("input");
+
+		cy.get("@input")
+			.should("contain.value", "From Oct 14, 2025");
+	});
 });
 
 describe("ToDateTime Option", () => {
@@ -749,4 +819,34 @@ describe("DynamicDateRange DateTimeRange Option", () => {
 		cy.get("@toInput")
 			.should("have.value", "Feb 26, 2025, 11:59:00 PM");
 	});
+
+	it("should allow picking new dates when a previous DateTimeRange value exists", () => {
+		// Commit an initial value
+		cy.get("[ui5-dynamic-date-range]")
+			.as("ddr")
+			.ui5DynamicDateRangeOpen()
+			.ui5DynamicDateRangeSelectOption()
+			.ui5DynamicDateRangeSetDateTime("from-picker", "Jan 1, 2024, 8:00:00 AM")
+			.ui5DynamicDateRangeSetDateTime("to-picker", "Jan 2, 2024, 9:00:00 AM")
+			.ui5DynamicDateRangeSubmit();
+
+		cy.get("@ddr")
+			.shadow()
+			.find("[ui5-input]")
+			.should("contain.value", "Jan 1, 2024");
+
+		// Reopen and pick different dates — set to-picker first to avoid auto-swap
+		cy.get("@ddr")
+			.ui5DynamicDateRangeOpen()
+			.ui5DynamicDateRangeSelectOption()
+			.ui5DynamicDateRangeSetDateTime("to-picker", "Mar 6, 2025, 11:00:00 AM")
+			.ui5DynamicDateRangeSetDateTime("from-picker", "Mar 5, 2025, 10:00:00 AM")
+			.ui5DynamicDateRangeSubmit();
+
+		cy.get("@ddr")
+			.shadow()
+			.find("[ui5-input]")
+			.should("contain.value", "Mar 5, 2025")
+			.and("contain.value", "Mar 6, 2025");
+	});
 });

packages/main/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx

@@ -10,8 +10,14 @@ export default function DateTimeRangeTemplate(this: DynamicDateRange) {
 	const currentOperator = this.currentValue?.operator || "DATETIMERANGE";
 
 	const getDateFromValue = (index = 0) => {
-		if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {
-			return this.getOption(this.value.operator)?.format(this.value)?.split("-")[index].trim();
+		const source = this.currentValue?.operator === currentOperator && this.currentValue.values?.length === 2
+			? this.currentValue
+			: this.value?.operator === currentOperator && this.value.values?.length === 2
+				? this.value
+				: undefined;
+
+		if (source) {
+			return this.getOption(source.operator)?.format(source)?.split("-")[index].trim();
 		}
 		return undefined;
 	};

packages/main/src/dynamic-date-range-options/FromDateTimeTemplate.tsx

@@ -8,7 +8,7 @@ import type FromDateTimeOption from "./FromDateTime.js";
 
 export default function FromDateTime(this: DynamicDateRange) {
 	const currentOption = this._currentOption as FromDateTimeOption;
-	const currentValue = this.value?.values ? this.value.values[0] as Date : undefined;
+	const currentValue = (this.currentValue?.values ?? this.value?.values)?.[0] as Date | undefined;
 	return (
 		<div class="ui5-dynamic-date-range-option-datetime-container">
 			<div class="ui5-dt-picker-header">