diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 36f31b62b81c..2d99b3597fcb 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -327,7 +327,7 @@ abstract class UI5Element extends HTMLElement { } if (!ctor.asyncFinished) { - await ctor.definePromise; + await ctor._definePromise; } if (!this._inDOM) { // Component removed from DOM while _processChildren was running @@ -340,6 +340,14 @@ abstract class UI5Element extends HTMLElement { this.onEnterDOM(); } + get definePromise(): Promise { + const ctor = this.constructor as typeof UI5Element; + if (!ctor.asyncFinished && ctor._definePromise) { + return ctor._definePromise; + } + return Promise.resolve(); + } + /** * Do not call this method from derivatives of UI5Element, use "onExitDOM" only * @private @@ -1329,7 +1337,7 @@ abstract class UI5Element extends HTMLElement { } static asyncFinished: boolean; - static definePromise: Promise | undefined; + static _definePromise: Promise | undefined; static i18nBundleStorage: Record = {}; static get i18nBundles(): Record { @@ -1355,7 +1363,7 @@ abstract class UI5Element extends HTMLElement { }); this.asyncFinished = true; }; - this.definePromise = defineSequence(); + this._definePromise = defineSequence(); const tag = this.getMetadata().getTag(); diff --git a/packages/base/src/features/InputElementsFormSupport.ts b/packages/base/src/features/InputElementsFormSupport.ts index e18f94288180..71d6d4c08f36 100644 --- a/packages/base/src/features/InputElementsFormSupport.ts +++ b/packages/base/src/features/InputElementsFormSupport.ts @@ -33,6 +33,10 @@ const setFormValidity = async (element: IFormInputElement) => { if (!element._internals?.form) { return; } + + element._internals.setValidity({ customError: true }, " "); // treat the form as invalid until CLDR and message bundles are loaded + await element.definePromise; + if (element.formValidity && Object.keys(element.formValidity).some(key => key)) { const focusRef = await element.formElementAnchor?.(); element._internals.setValidity(element.formValidity, element.formValidityMessage, focusRef); diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 9884dbce8ae8..d8f273334a81 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -1043,17 +1043,36 @@ class DatePicker extends DateComponentBase implements IFormInputElement { /** * Currently selected date represented as a Local JavaScript Date instance. + * Note: this getter can only be reliably used after the component is fully defined. Use dateValueAsync which resolves only when this condition is met. * @public * @default null + * @deprecated Use dateValueAsync instead */ get dateValue(): Date | null { return this.liveValue ? this.getValueFormat().parse(this.liveValue) as Date : this.getValueFormat().parse(this.value) as Date; } + /** + * Promise that resolves to the currently selected date represented as a Local JavaScript Date instance. + * @public + * @default Promise + */ + get dateValueAsync(): Promise { + return this.definePromise.then(() => { + return this.dateValue; + }); + } + get dateValueUTC(): Date | null { return this.liveValue ? this.getValueFormat().parse(this.liveValue, true) as Date : this.getValueFormat().parse(this.value) as Date; } + get dateValueUTCAsync(): Promise { + return this.definePromise.then(() => { + return this.dateValueUTC; + }); + } + get styles() { return { main: {