diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 36f31b62b81c..84fbc2592428 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -340,6 +340,14 @@ abstract class UI5Element extends HTMLElement { this.onEnterDOM(); } + get definePromiseSafe() { + 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 diff --git a/packages/base/src/features/InputElementsFormSupport.ts b/packages/base/src/features/InputElementsFormSupport.ts index e18f94288180..7d25f2a4961a 100644 --- a/packages/base/src/features/InputElementsFormSupport.ts +++ b/packages/base/src/features/InputElementsFormSupport.ts @@ -1,11 +1,14 @@ import type UI5Element from "../UI5Element.js"; +type FormattedValue = FormData | string | null; +type ElementAnchor = HTMLElement | undefined; + interface IFormInputElement extends UI5Element { name?: string; - formFormattedValue: FormData | string | null; - formValidityMessage?: string; - formValidity?: ValidityStateFlags; - formElementAnchor?: () => HTMLElement | undefined | Promise; + formFormattedValue: FormattedValue | Promise; + formValidityMessage?: string | Promise; + formValidity?: ValidityStateFlags | Promise; + formElementAnchor?: () => ElementAnchor | Promise; } const updateFormValue = (element: IFormInputElement | UI5Element) => { @@ -14,7 +17,7 @@ const updateFormValue = (element: IFormInputElement | UI5Element) => { } }; -const setFormValue = (element: IFormInputElement) => { +const setFormValue = async (element: IFormInputElement) => { if (!element._internals?.form) { return; } @@ -26,16 +29,27 @@ const setFormValue = (element: IFormInputElement) => { return; } - element._internals.setFormValue(element.formFormattedValue); + const formattedValue = element.formFormattedValue instanceof Promise + ? await element.formFormattedValue + : element.formFormattedValue; + element._internals.setFormValue(formattedValue); }; const setFormValidity = async (element: IFormInputElement) => { if (!element._internals?.form) { return; } - if (element.formValidity && Object.keys(element.formValidity).some(key => key)) { + const formValidity = element.formValidity instanceof Promise + ? await element.formValidity + : element.formValidity; + + const formValidityMessage = element.formValidityMessage instanceof Promise + ? await element.formValidityMessage + : element.formValidityMessage; + + if (formValidity && Object.keys(formValidity).some(key => key)) { const focusRef = await element.formElementAnchor?.(); - element._internals.setValidity(element.formValidity, element.formValidityMessage, focusRef); + element._internals.setValidity(formValidity, formValidityMessage, focusRef); } else { element._internals.setValidity({}); } diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index 7007d89906a8..178bca147325 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -309,27 +309,29 @@ class StepInput extends UI5Element implements IFormInputElement { } get formValidityMessage() { - const validity = this.formValidity; - - if (validity.patternMismatch) { - return StepInput.i18nBundle.getText(STEPINPUT_PATTER_MISSMATCH, this.valuePrecision); - } - if (validity.rangeUnderflow) { - return StepInput.i18nBundle.getText(STEPINPUT_RANGEUNDERFLOW, this.min as number); - } - if (validity.rangeOverflow) { - return StepInput.i18nBundle.getText(STEPINPUT_RANGEOVERFLOW, this.max as number); - } + return this.formValidity.then(validity => { + if (validity.patternMismatch) { + return StepInput.i18nBundle.getText(STEPINPUT_PATTER_MISSMATCH, this.valuePrecision); + } + if (validity.rangeUnderflow) { + return StepInput.i18nBundle.getText(STEPINPUT_RANGEUNDERFLOW, this.min as number); + } + if (validity.rangeOverflow) { + return StepInput.i18nBundle.getText(STEPINPUT_RANGEOVERFLOW, this.max as number); + } - return ""; // No error + return ""; // No error + }); } - get formValidity(): ValidityStateFlags { - return { - patternMismatch: this.value !== 0 && !this._isValueWithCorrectPrecision, - rangeOverflow: this.max !== undefined && this.value >= this.max, - rangeUnderflow: this.min !== undefined && this.value <= this.min, - }; + get formValidity(): Promise { + return this.definePromiseSafe.then(() => { + return { + patternMismatch: this.value !== 0 && !this._isValueWithCorrectPrecision, + rangeOverflow: this.max !== undefined && this.value >= this.max, + rangeUnderflow: this.min !== undefined && this.value <= this.min, + }; + }); } get formFormattedValue(): FormData | string | null {