From 7dd06286e778d2a6cc6c9ad4712bf56dba08a033 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Wed, 2 Sep 2026 17:06:17 +0300 Subject: [PATCH] fix(ui5-date-picker): sync disabled state to inner input immediately on change Issue: When was toggled via a framework (e.g. React), the host element updated synchronously but the inner only updated in the next animation frame. This gap allowed the browser's accessibility tree to snapshot a stale disabled state that never cleared, leaving the inner input reported as disabled even after the component was re-enabled. Solution: Override 'onInvalidation' to propagate 'disabled' to '_dateTimeInput' immediately when the property changes, before the scheduled re-render fires. This closes the one-frame gap and ensures the accessibility tree always reflects the correct state. Fixes #14006 --- packages/main/src/DatePicker.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 041511d31afa6..5b46e44bfbc90 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -77,7 +77,7 @@ import datePickerCss from "./generated/themes/DatePicker.css.js"; import datePickerPopoverCss from "./generated/themes/DatePickerPopover.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; -import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { Slot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; type ValueStateAnnouncement = Record, string>; @@ -485,6 +485,12 @@ class DatePicker extends DateComponentBase implements IFormInputElement { this._calendarCurrentPicker = this.firstPicker; } + onInvalidation(changeInfo: ChangeInfo) { + if (changeInfo.type === "property" && changeInfo.name === "disabled" && this._dateTimeInput) { + this._dateTimeInput.disabled = !!changeInfo.newValue; + } + } + onBeforeRendering() { ["minDate", "maxDate"].forEach((prop: string) => { const propValue = this[prop as keyof DatePicker] as string;