fixed validation bug

docs/getting-started/changelog.md

@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `sl-clear` event to `sl-select`
 - Fixed a bug where dynamically changing menu items in `sl-select` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374)
 - Fixed the margin in `sl-menu-label` to align with menu items
+- Fixed a bug where setting the `value` attribute or property on `sl-input` and `sl-textarea` would trigger validation too soon
 
 ## 2.0.0-beta.33
 

src/components/input/input.ts

@@ -257,7 +257,8 @@ export default class SlInput extends LitElement {
 
   @watch('value')
   handleValueChange() {
-    this.invalid = !this.input.checkValidity();
+    // Wait for the update to complete before checking the input's validity
+    this.updateComplete.then(() => (this.invalid = !this.input.checkValidity()));
   }
 
   render() {

src/components/textarea/textarea.ts

@@ -226,7 +226,8 @@ export default class SlTextarea extends LitElement {
 
   @watch('value')
   handleValueChange() {
-    this.invalid = !this.input.checkValidity();
+    // Wait for the update to complete before checking the input's validity
+    this.updateComplete.then(() => (this.invalid = !this.input.checkValidity()));
   }
 
   setTextareaHeight() {