@mgdis/mg-components 6.26.0 → 6.28.0

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js

@@ -9,6 +9,8 @@ export class MgInputDate {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -80,10 +82,6 @@ export class MgInputDate {
          * Handle input event
          */
         this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -105,11 +103,8 @@ export class MgInputDate {
             // when we reset the field we need to test a blank value.
             if (['Delete', 'Backspace'].includes(event.key)) {
                 event.preventDefault();
+                // validity is recomputed in componentDidUpdate, once the input actually holds the blank value
                 this.value = null;
-                this.checkValidity();
-                if (this.hasDisplayedError) {
-                    this.setErrorMessage();
-                }
             }
         };
         /**
@@ -196,6 +191,7 @@ export class MgInputDate {
         };
     }
     validateValue(newValue) {
+        this.validityCheckPending = true;
         // When the input is not fully completed or has been cleared, the value becomes an empty string.
         if (['', undefined].includes(newValue)) {
             // need to force value update to `null` to prevent extra render
@@ -288,6 +284,8 @@ export class MgInputDate {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -358,14 +356,32 @@ export class MgInputDate {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'c13dd54974bd7c8381bcefbe847fe79f2270506c', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (h("mg-input", { key: '3d3f6910dde9c32bbf3d0c853e0c778380ed40fc', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, localeDate(this.value, this.locale))) : (h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));

package/dist/collection/components/molecules/inputs/mg-input-file/mg-input-file.js

@@ -12,6 +12,8 @@ export class MgInputFile {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -172,6 +174,7 @@ export class MgInputFile {
         };
     }
     watchValue(newValue) {
+        this.validityCheckPending = true;
         if (allItemsAreString(newValue)) {
             this.files = this.value.map((fileName) => new File([], fileName));
         }
@@ -277,6 +280,8 @@ export class MgInputFile {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -328,16 +333,34 @@ export class MgInputFile {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.inputElement !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '3c4c0ebdd1661e381f0002b2ae68dcf454097913', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: 'bd7665fe8c6e01ec4e04fbbbf9cc21ccc4128b17', class: "mg-c-input__file-container" }, h("input", { key: 'f27d10160115ec1ff5163a1c55aa2658779c6fd7', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
+        return (h("mg-input", { key: 'f1613e1105c1eea0c08624ffc270a74889d85ce0', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("div", { key: '23897ae896de9569ea68bf88e26f1349eb5bc909', class: "mg-c-input__file-container" }, h("input", { key: '0601a8af1c3f17331cb671184353b8b63a5f4fa8', name: this.name, id: this.identifier, class: "mg-u-visually-hidden", type: "file", multiple: this.multiple === true, capture: this.capture, accept: this.accept, disabled: this.disabled, required: this.files.length === 0 && this.required, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onChange: this.handleInputChange, "aria-invalid": (this.invalid === true).toString(), ref: (el) => {
                 this.inputElement = el;
-            } }), h("mg-button", { key: 'd16c4cbd95d676bcddb895659aab37f0f9c396eb', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
+            } }), h("mg-button", { key: '5ac1076a443cc1a0bb2d7168b1d248d31faeedfd', variant: "secondary", class: "mg-c-input__file-button", type: "button", disabled: this.disabled, onClick: this.handleButtonClick, onBlur: this.handleButtonBlur, tabindex: "-1", ref: (el) => {
                 this.fileButtonElement = el;
             } }, this.messages.input.file.browse), this.renderFiles())));
     }

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -12,6 +12,8 @@ export class MgInputNumeric {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -78,11 +80,6 @@ export class MgInputNumeric {
          */
         this.handleInput = () => {
             this.value = this.input.value;
-            // Check validity
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
         };
         /**
          * Handle focus event
@@ -232,6 +229,7 @@ export class MgInputNumeric {
     }
     validateValue(newValue) {
         var _a;
+        this.validityCheckPending = true;
         // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
         if (typeof newValue === 'string') {
             // Check if integer value starts with '0' (leading zero)
@@ -352,6 +350,8 @@ export class MgInputNumeric {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -464,14 +464,32 @@ export class MgInputNumeric {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'dbf435211890922742cbead9ab3a738b5219df44', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '8a9a2c269754aa1259e79dd5e68cc0ed6b578fd1', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js

@@ -8,6 +8,8 @@ export class MgInputPassword {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         /**
          * Input name
          * If not set the value equals the identifier
@@ -53,10 +55,6 @@ export class MgInputPassword {
          * Handle input event
          */
         this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -101,6 +99,7 @@ export class MgInputPassword {
         };
     }
     handleValue(newValue) {
+        this.validityCheckPending = true;
         this.valueChange.emit(newValue);
     }
     watchReadonly(newValue) {
@@ -181,6 +180,8 @@ export class MgInputPassword {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -243,15 +244,33 @@ export class MgInputPassword {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
         const displayPasswordIcon = this.displayPassword ? 'eye-slash' : 'eye';
-        return (h("mg-input", { key: '913d0653faad21f56cb930dfdc0947a0747f17ad', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '2d9498c380536dc32177d1ac16a513ee43944a72', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (h("span", { class: "mg-c-input__input-group" }, h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, h("mg-icon", { class: "mg-c-input__input-icon", icon: displayPasswordIcon }))))));

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js

@@ -16,12 +16,12 @@ export class MgInputRadio {
         /************
          * Internal *
          ************/
-        // HTML selector
-        this.inputs = [];
         // classes
         this.classVerticalList = 'mg-c-input--vertical-list';
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` or `items` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -65,7 +65,6 @@ export class MgInputRadio {
          * @param event - input event
          */
         this.handleInput = (event) => {
-            this.checkValidity();
             this.value = this.options[event.target.value].value;
         };
         /**
@@ -78,11 +77,23 @@ export class MgInputRadio {
             // reset guard
             this.handlerInProgress = undefined;
         };
+        /**
+         * Check if the required constraint is fulfilled
+         * The native group validity cannot answer it: a browser keeps the checked member a group had, even
+         * once that input is removed from the DOM. Options that cannot be selected are ignored.
+         * @returns required constraint is fulfilled
+         */
+        this.validateRequired = () => {
+            const selectableOptions = this.options.filter((option) => !option.disabled);
+            return (!this.required ||
+                selectableOptions.length < 1 ||
+                selectableOptions.some((option) => this.isSelectedValue(option.value)));
+        };
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);
+            this.setValidity(this.readonly || this.disabled || (this.getInvalidElement() === undefined && this.validateRequired()));
         };
         /**
          * Set input error message
@@ -98,7 +109,7 @@ export class MgInputRadio {
                     this.errorMessage = this.customErrorMessage.message;
                 }
                 // required
-                else if (invalidElement.validity.valueMissing) {
+                else if (invalidElement === undefined || invalidElement.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
             }
@@ -107,11 +118,24 @@ export class MgInputRadio {
          * get invalid element
          * @returns element
          */
-        this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
+        this.getInvalidElement = () => this.getInputs().find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
+        /**
+         * Get the rendered radio inputs
+         * Read from the DOM: references kept from a render would outlive the inputs they point to.
+         * @returns rendered radio inputs
+         */
+        this.getInputs = () => Array.from(this.element.shadowRoot.querySelectorAll('input[type="radio"]'));
+        /**
+         * Check if a value is the selected one
+         * @param optionValue - option value to compare to the component value
+         * @returns option value is the selected one
+         */
+        this.isSelectedValue = (optionValue) => JSON.stringify(this.value) === JSON.stringify(optionValue);
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     watchValue(newValue) {
         var _a;
+        this.validityCheckPending = true;
         if (allItemsAreString(this.items) && typeof newValue === 'string') {
             this.readonlyValue = newValue;
         }
@@ -123,7 +147,7 @@ export class MgInputRadio {
         }
         this.valueChange.emit(newValue);
     }
-    validateItems(newValue) {
+    validateItems(newValue, oldValue) {
         // Validate if items have required min length
         if (typeof newValue === 'object' && newValue.length < 2) {
             throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${toString(newValue)}.`);
@@ -139,6 +163,14 @@ export class MgInputRadio {
         else {
             throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${toString(newValue)}.`);
         }
+        // `oldValue` is undefined on init
+        if (oldValue !== undefined) {
+            // the options cannot display a value they no longer offer, drop it
+            if (this.value !== undefined && !this.options.some((option) => this.isSelectedValue(option.value))) {
+                this.value = undefined;
+            }
+            this.validityCheckPending = true;
+        }
     }
     watchInputVerticalList(newValue) {
         if (newValue)
@@ -153,7 +185,7 @@ export class MgInputRadio {
             this.classCollection.delete(classReadonly);
     }
     handleValidityChange(newValue, _oldValue, prop) {
-        this.inputs.forEach((input) => {
+        this.getInputs().forEach((input) => {
             input[prop] = newValue;
         });
         this.checkValidity();
@@ -172,9 +204,8 @@ export class MgInputRadio {
      * Set focus on input.
      */
     async setFocus() {
-        if (this.inputs.length > 0) {
-            this.inputs[0].focus();
-        }
+        var _a;
+        (_a = this.element.shadowRoot.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
      * Display input error if it exists.
@@ -216,6 +247,8 @@ export class MgInputRadio {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -281,20 +314,35 @@ export class MgInputRadio {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.getInputs().length > 0) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '763e021cdda0735dcbd62700f09cbc32c0de7377', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index) => (h("div", { key: input.title, class: {
+        return (h("mg-input", { key: '1fd4b600eb95f2ff5c753884c40b982e0552d576', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("div", { class: "mg-c-input__input-group-container" }, this.options.map((input, index) => (h("div", { key: input.title, class: {
                 'mg-c-input__input-group': true,
                 'mg-c-input__input-group--disabled': this.disabled || input.disabled,
-            } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
-                if (el !== null)
-                    this.inputs[index] = el;
-            } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
+            } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: this.isSelectedValue(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
     }
     static get is() { return "mg-input-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js

@@ -24,8 +24,9 @@ const isOptGroup = (optgroup) => typeof optgroup === 'object' &&
     typeof optgroup.group === 'string' &&
     allItemsAreOptions(optgroup.options);
 /**
- * Ensure options can be unambiguously differentiated by their title
+ * Report, without enforcing, options that cannot be unambiguously differentiated by their title
  * Two options can share the same title only when they belong to different groups
+ * An option is identified by its render index, so a duplicated title only harms readability: it is reported to the developer and the field still renders
  * @param items - select options to validate
  */
 const validateUniqueTitles = (items) => {
@@ -37,7 +38,7 @@ const validateUniqueTitles = (items) => {
         const titles = titlesByGroup.get(group);
         if (titles.has(title)) {
             const groupContext = group === undefined ? 'outside of a group' : `within the group "${group}"`;
-            throw new Error(`<mg-input-select> prop "items" must not contain options with the same "title" ${groupContext}. Duplicated title: "${title}".`);
+            console.error(`<mg-input-select> prop "items" must not contain options with the same "title" ${groupContext}. Duplicated title: "${title}".`);
         }
         titles.add(title);
     });
@@ -70,6 +71,8 @@ export class MgInputSelect {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` or `items` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -217,18 +220,14 @@ export class MgInputSelect {
         this.renderOption = (option, index) => (h("option", { key: index, value: `${index}`, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     }
     validateValue(newValue) {
-        setTimeout(() => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
-        }, 0);
+        this.validityCheckPending = true;
         this.valueChange.emit(newValue);
     }
-    validateItems(newValue) {
+    validateItems(newValue, oldValue) {
         // Empty options
         if (newValue.length === 0) {
             this.options = [];
+            this.valueExist = false;
         }
         // String array
         else if (allItemsAreString(newValue)) {
@@ -254,6 +253,9 @@ export class MgInputSelect {
         else {
             throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${toString(newValue)}.`);
         }
+        // `oldValue` is undefined on init. The value is kept: an unmatched one renders the placeholder.
+        if (oldValue !== undefined)
+            this.validityCheckPending = true;
     }
     watchReadonly(newValue) {
         if (newValue)
@@ -333,6 +335,8 @@ export class MgInputSelect {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -403,8 +407,26 @@ export class MgInputSelect {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
@@ -413,7 +435,7 @@ export class MgInputSelect {
         const readonlyValue = this.getReadonlyValue();
         // Running index shared across groups, so each option gets a unique value matching its position in getOptions()
         let optionIndex = 0;
-        return (h("mg-input", { key: 'aab8c17ced01c0afbec9114f280ee2b7fa73cdfc', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: 'ca4a3a1b95094505bff8bf062566a633a1b12d1a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder

package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.js

@@ -34,6 +34,8 @@ export class MgInputText {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.customErrorMessage = { lock: false };
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         /**
          * Input name
          * If not set the value equals the identifier
@@ -98,10 +100,6 @@ export class MgInputText {
          * Handle input event
          */
         this.handleInput = () => {
-            this.checkValidity();
-            if (this.hasDisplayedError) {
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -182,6 +180,7 @@ export class MgInputText {
     }
     handleValue(newValue) {
         var _a, _b;
+        this.validityCheckPending = true;
         if ((_a = this.datalistoptions) === null || _a === void 0 ? void 0 : _a.every(isOption)) {
             this.valueChange.emit(((_b = this.datalistoptions.find((option) => option.title === newValue)) === null || _b === void 0 ? void 0 : _b.value) || newValue);
         }
@@ -301,6 +300,8 @@ export class MgInputText {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -373,14 +374,32 @@ export class MgInputText {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '3454b5f94af7b47a2c94b1416f59f840552ef70a', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '20a89d186c673936740cce348977cc0a8471fafb', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
                 h("div", { key: "input", class: "mg-c-input__input-group-container", style: {