fix(field): do not validate disabled fields (#586)

packages/field/src/LionField.js

@@ -125,10 +125,9 @@ export class LionField extends FormControlMixin(
   updated(changedProps) {
     super.updated(changedProps);
 
-    if (changedProps.has('disabled') && this.disabled) {
+    if (changedProps.has('disabled')) {
-      this._inputNode.disabled = true;
+      this._inputNode.disabled = this.disabled;
-    } else if (changedProps.has('disabled')) {
+      this.validate();
-      this._inputNode.disabled = false;
     }
 
     if (changedProps.has('name')) {

packages/field/test/lion-field.test.js

@@ -359,6 +359,42 @@ describe('<lion-field>', () => {
         wantedShowsFeedbackFor: [],
       });
     });
+    it('should not run validation when disabled', async () => {
+      const HasX = class extends Validator {
+        constructor() {
+          super();
+          this.name = 'HasX';
+        }
+
+        execute(value) {
+          const result = value.indexOf('x') === -1;
+          return result;
+        }
+      };
+      const disabledEl = await fixture(html`
+        <${tag}
+          disabled
+          .validators=${[new HasX()]}
+          .modelValue=${'a@b.nl'}
+        >
+          ${inputSlot}
+        </${tag}>
+      `);
+      const el = await fixture(html`
+        <${tag}
+          .validators=${[new HasX()]}
+          .modelValue=${'a@b.nl'}
+        >
+          ${inputSlot}
+        </${tag}>
+      `);
+
+      expect(el.hasFeedbackFor).to.deep.equal(['error']);
+      expect(el.validationStates.error).to.have.a.property('HasX');
+
+      expect(disabledEl.hasFeedbackFor).to.deep.equal([]);
+      expect(disabledEl.validationStates.error).to.equal(undefined);
+    });
 
     it('can be required', async () => {
       const el = await fixture(html`

packages/form-system/stories/17-Validation-Examples.stories.mdx

@@ -615,3 +615,64 @@ const minDateValidatorRef = new MinDate(beginDate, {
   .validators="${[minDateValidatorRef]}"
 ></lion-input-date>
 ```
+
+## Disabled inputs validation
+
+According to the W3C specs, Disabled fields should not be validated.
+Therefor if the attribute disabled is present on a lion-input it will not be validated.
+
+<Story name="Disabled Validators">
+  {html`
+    <lion-input
+      disabled
+      .validators=${[new EqualsLength(7)]}
+      .modelValue=${'not exactly'}
+      label="EqualsLength"
+    ></lion-input>
+    <lion-input
+      disabled
+      .validators=${[new MinLength(10)]}
+      .modelValue=${'too short'}
+      label="MinLength"
+    ></lion-input>
+    <lion-input
+      disabled
+      .validators=${[new MaxLength(7)]}
+      .modelValue=${'too long'}
+      label="MaxLength"
+    ></lion-input>
+    <lion-input
+      disabled
+      .validators=${[new MinMaxLength({ min: 10, max: 20 })]}
+      .modelValue=${'that should be enough'}
+      label="MinMaxLength"
+    ></lion-input>
+  `}
+</Story>
+
+```html
+<lion-input
+  disabled
+  .validators=${[new EqualsLength(7)]}
+  .modelValue=${'not exactly'}
+  label="EqualsLength"
+></lion-input>
+<lion-input
+  disabled
+  .validators=${[new MinLength(10)]}
+  .modelValue=${'too short'}
+  label="MinLength"
+></lion-input>
+<lion-input
+  disabled
+  .validators=${[new MaxLength(7)]}
+  .modelValue=${'too long'}
+  label="MaxLength"
+></lion-input>
+<lion-input
+  disabled
+  .validators=${[new MinMaxLength({ min: 10, max: 20 })]}
+  .modelValue=${'that should be enough'}
+  label="MinMaxLength"
+></lion-input>
+```

packages/validate/src/ValidateMixin.js

@@ -261,6 +261,12 @@ export const ValidateMixin = dedupeMixin(
        * call. Situation B will occur after every call.
        */
       async validate({ clearCurrentResult } = {}) {
+        if (this.disabled) {
+          this.__clearValidationResults();
+          this.__validationResult = [];
+          this._updateFeedbackComponent();
+          return;
+        }
         if (!this.__validateInitialized) {
           return;
         }