fixes #473

docs/resources/changelog.md

@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `sl-request-close` event to `sl-dialog` and `sl-drawer`
 - Added `dialog.denyClose` and `drawer.denyClose` animations
 - Fixed a bug in `sl-color-picker` where setting `value` immediately wouldn't trigger an update
+- Fixed a bug that resulted in form controls having incorrect validity when `disabled` was initially set [#473](https://github.com/shoelace-style/shoelace/issues/473)
 
 ## 2.0.0-beta.44
 

src/components/checkbox/checkbox.ts

@@ -64,6 +64,14 @@ export default class SlCheckbox extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
+  updated(changedProps: Map<string, any>) {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (changedProps.get('disabled')) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   /** Simulates a click on the checkbox. */
   click() {
     this.input.click();

src/components/input/input.test.ts

@@ -0,0 +1,35 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlInput from './input';
+
+describe('<sl-input>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-input disabled></sl-input> `);
+    const input = el.shadowRoot?.querySelector('[part="input"]') as HTMLInputElement;
+
+    expect(input.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture(html` <sl-input></sl-input> `)) as SlInput;
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should be invalid when required and empty', async () => {
+    const el = (await fixture(html` <sl-input required></sl-input> `)) as SlInput;
+
+    expect(el.invalid).to.be.true;
+  });
+
+  it('should be invalid when required and after removing disabled ', async () => {
+    const el = (await fixture(html` <sl-input disabled required></sl-input> `)) as SlInput;
+
+    el.disabled = false;
+    await el.updateComplete;
+
+    expect(el.invalid).to.be.true;
+  });
+});

src/components/input/input.ts

@@ -156,6 +156,14 @@ export default class SlInput extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
+  updated(changedProps: Map<string, any>) {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (changedProps.get('disabled')) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange);

src/components/radio/radio.ts

@@ -56,6 +56,14 @@ export default class SlRadio extends LitElement {
   /** Emitted when the control gains focus. */
   @event('sl-focus') slFocus: EventEmitter<void>;
 
+  updated(changedProps: Map<string, any>) {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (changedProps.get('disabled')) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   /** Simulates a click on the radio. */
   click() {
     this.input.click();

src/components/range/range.ts

@@ -100,6 +100,14 @@ export default class SlRange extends LitElement {
     });
   }
 
+  updated(changedProps: Map<string, any>) {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (changedProps.get('disabled')) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this.input);

src/components/select/select.ts

@@ -137,6 +137,14 @@ export default class SlSelect extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
+  updated(changedProps: Map<string, any>) {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (changedProps.get('disabled')) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this);
@@ -187,13 +195,6 @@ export default class SlSelect extends LitElement {
     this.syncItemsFromValue();
   }
 
-  @watch('disabled')
-  handleDisabledChange() {
-    if (this.disabled && this.isOpen) {
-      this.dropdown.hide();
-    }
-  }
-
   handleFocus() {
     if (!this.hasFocus) {
       this.hasFocus = true;
@@ -281,6 +282,13 @@ export default class SlSelect extends LitElement {
     this.box.focus();
   }
 
+  @watch('disabled')
+  async handleDisabledChange() {
+    if (this.disabled && this.isOpen) {
+      this.dropdown.hide();
+    }
+  }
+
   @watch('multiple')
   handleMultipleChange() {
     // Cast to array | string based on `this.multiple`

src/components/switch/switch.ts

@@ -64,6 +64,14 @@ export default class SlSwitch extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
+  updated(changedProps: Map<string, any>) {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (changedProps.get('disabled')) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   /** Simulates a click on the switch. */
   click() {
     this.input.click();

src/components/textarea/textarea.test.ts

@@ -0,0 +1,35 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlTextarea from './textarea';
+
+describe('<sl-textarea>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-textarea disabled></sl-textarea> `);
+    const textarea = el.shadowRoot?.querySelector('[part="textarea"]') as HTMLInputElement;
+
+    expect(textarea.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture(html` <sl-textarea></sl-textarea> `)) as SlTextarea;
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should be invalid when required and empty', async () => {
+    const el = (await fixture(html` <sl-textarea required></sl-textarea> `)) as SlTextarea;
+
+    expect(el.invalid).to.be.true;
+  });
+
+  it('should be invalid when required and after removing disabled ', async () => {
+    const el = (await fixture(html` <sl-textarea disabled required></sl-textarea> `)) as SlTextarea;
+
+    el.disabled = false;
+    await el.updateComplete;
+
+    expect(el.invalid).to.be.true;
+  });
+});

src/components/textarea/textarea.ts

@@ -144,6 +144,14 @@ export default class SlTextarea extends LitElement {
     this.invalid = !this.input.checkValidity();
   }
 
+  updated(changedProps: Map<string, any>) {
+    // Disabled form controls are always valid, so we need to recheck validity when the state changes
+    if (changedProps.get('disabled')) {
+      this.input.disabled = this.disabled;
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this.input);