fixes #1063

docs/resources/changelog.md

@@ -28,6 +28,7 @@ This release includes a complete rewrite of `<sl-select>` to improve accessibili
 - Fixed a bug in `<sl-tree>` that caused `sl-selection-change` to emit before the DOM updated [#1096](https://github.com/shoelace-style/shoelace/issues/1096)
 - Fixed a bug that prevented `<sl-switch>` from submitting a default value of `on` when no value was provided [#1103](https://github.com/shoelace-style/shoelace/discussions/1103)
 - Fixed a bug in `<sl-textarea>` that caused the scrollbar to show sometimes when using `resize="auto"`
+- Fixed a bug in `<sl-input>` and `<sl-textarea>` that caused its validation states to be out of sync in some cases [#1063](https://github.com/shoelace-style/shoelace/issues/1063)
 - Reorganized all components to make class structures more consistent
 - Updated some incorrect default values for design tokens in the docs [#1097](https://github.com/shoelace-style/shoelace/issues/1097)
 - Updated non-public fields to use the `private` keyword (these were previously private only by convention, but now TypeScript will warn you)

src/components/input/input.ts

@@ -250,6 +250,7 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
 
   private handleInput() {
     this.value = this.input.value;
+    this.invalid = !this.checkValidity();
     this.emit('sl-input');
   }
 
@@ -297,8 +298,8 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
   }
 
   @watch('value', { waitUntilFirstUpdate: true })
-  handleValueChange() {
-    this.input.value = this.value; // force a sync update
+  async handleValueChange() {
+    await this.updateComplete;
     this.invalid = !this.checkValidity();
   }
 

src/components/textarea/textarea.ts

@@ -190,10 +190,10 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
   }
 
   @watch('value', { waitUntilFirstUpdate: true })
-  handleValueChange() {
-    this.input.value = this.value; // force a sync update
+  async handleValueChange() {
+    await this.updateComplete;
     this.invalid = !this.checkValidity();
-    this.updateComplete.then(() => this.setTextareaHeight());
+    this.setTextareaHeight();
   }
 
   /** Sets focus on the textarea. */