feat(inputs): detect constraint validation attribute changes

packages/oruga/src/composables/useInputHandler.ts

@@ -5,6 +5,7 @@
     type ExtractPropTypes,
     type MaybeRefOrGetter,
     type Component,
+    watch,
 } from "vue";
 import { injectField } from "@/components/field/fieldInjection";
 import { unrefElement } from "./unrefElement";
@@ -35,6 +36,17 @@
         : null;
 }
 
+const constraintValidationAttributes = [
+    "disabled",
+    "required",
+    "pattern",
+    "maxlength",
+    "minlength",
+    "max",
+    "min",
+    "step",
+];
+
 /**
  * Form input handler functionalities
  */
@@ -61,10 +73,9 @@
     // inject parent field component if used inside one
     const { parentField } = injectField();
 
-    const element = computed<ValidatableFormElement>(() => {
+    const maybeElement = computed<ValidatableFormElement | undefined>(() => {
         const el = unrefElement<Component | HTMLElement>(inputRef);
         if (!el) {
-            console.warn("useInputHandler: inputRef contains no element");
             return undefined;
         }
         if (el.getAttribute("data-oruga-input"))
@@ -83,6 +94,14 @@
         return inputs as ValidatableFormElement;
     });
 
+    const element = computed(() => {
+        const el = maybeElement.value;
+        if (!el) {
+            console.warn("useInputHandler: inputRef contains no element");
+        }
+        return el;
+    });
+
     // --- Input Focus Feature ---
 
     const isFocused = ref(false);
@@ -138,7 +157,7 @@
      * If validation fail, send 'danger' type,
      * and error message to parent if it's a Field.
      */
-    function checkHtml5Validity(): boolean {
+    function checkHtml5Validity(): void {
         if (!props.useHtml5Validation) return;
 
         if (!element.value) return;
@@ -149,8 +168,6 @@
             setInvalid();
             isValid.value = false;
         }
-
-        return isValid.value;
     }
 
     function setInvalid(): void {
@@ -203,6 +220,85 @@
         emits("invalid", event);
     }
 
+    if (!isSSR) {
+        // Respond to attribute changes that might clear constraint validation errors.
+        // For instance, removing the `required` attribute on an empty field means that it's no
+        // longer invalid, so we might as well clear the validation message.
+        // In order to follow our usual convention, we won't add new validation messages
+        // until the next time the user interacts with the control.
+
+        // Technically, having the `required` attribute on one element in a radio button
+        // group affects the validity of the entire group.
+        // See https://html.spec.whatwg.org/multipage/input.html#radio-button-group.
+        // We're not checking for that here because it would require more expensive logic.
+        // Because of that, this will only work properly if the `required` attributes of all radio
+        // buttons in the group are synchronized with each other, which is likely anyway.
+        // (We're also expecting the use of radio buttons with our default validation message handling
+        // to be fairly uncommon because the overall visual experience is clunky with such a configuration.)
+        const onAttributeChange = (): void => {
+            if (!isValid.value) checkHtml5Validity();
+        };
+        let validationAttributeObserver: MutationObserver | null = null;
+        let ancestorMutationObserver: MutationObserver | null = null;
+        watch(
+            [maybeElement, isValid, () => props.useHtml5Validation],
+            (data) => {
+                // Not using destructuring assignment because browser support is just a little too weak at the moment
+                const el = data[0];
+                const valid = data[1];
+                const useValidation = data[2];
+
+                // Clean up previous state.
+                if (validationAttributeObserver != null) {
+                    // Process any pending events.
+                    if (validationAttributeObserver.takeRecords().length > 0) {
+                        onAttributeChange();
+                    }
+                    validationAttributeObserver.disconnect();
+                }
+                if (ancestorMutationObserver != null) {
+                    if (ancestorMutationObserver.takeRecords().length > 0) {
+                        onAttributeChange();
+                    }
+                    ancestorMutationObserver.disconnect();
+                }
+
+                if (el == undefined || valid || !useValidation) {
+                    return;
+                }
+
+                if (validationAttributeObserver == null) {
+                    validationAttributeObserver = new MutationObserver(
+                        onAttributeChange,
+                    );
+                }
+                validationAttributeObserver.observe(el, {
+                    attributeFilter: constraintValidationAttributes,
+                });
+
+                // Note that this doesn't react to changes in the list of ancestors.
+                // Based on testing, Vue seems to rarely, if ever, re-parent DOM nodes;
+                // it generally prefers to create new ones under the new parent.
+                // That means this simpler solution is likely good enough for now.
+                let ancestor: Node | null = el;
+                while ((ancestor = ancestor.parentNode)) {
+                    // Form controls can be disabled by their ancestor fieldsets.
+                    if (ancestor instanceof HTMLFieldSetElement) {
+                        if (ancestorMutationObserver == null) {
+                            ancestorMutationObserver = new MutationObserver(
+                                onAttributeChange,
+                            );
+                        }
+                        ancestorMutationObserver.observe(ancestor, {
+                            attributeFilter: ["disabled"],
+                        });
+                    }
+                }
+            },
+            { immediate: true },
+        );
+    }
+
     return {
         isFocused,
         isValid,