Fixes #313

docs/getting-started/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added `handle-icon` slot to `sl-image-comparer` [#311](https://github.com/shoelace-style/shoelace/issues/311)
 - Fixed a bug in `sl-select` where removing a tag would toggle the dropdown
+- Fixed a bug in `sl-input` and `sl-textarea` where the input might not exist when the value watcher is called [#313](https://github.com/shoelace-style/shoelace/issues/313)
 - Updated `sl-menu-item` focus styles
 - Updated `sl-select` so tags will wrap when `multiple` is true
 

src/components/input/input.tsx

@@ -133,7 +133,8 @@ export class Input {
 
   @Watch('value')
   handleValueChange() {
-    this.invalid = !this.input.checkValidity();
+    // In rare cases, the watcher may be called before render so we need to make sure the input exists
+    this.invalid = this.input ? !this.input.checkValidity() : false;
   }
 
   /** Emitted when the control's value changes. */

src/components/textarea/textarea.tsx

@@ -123,7 +123,8 @@ export class Textarea {
 
   @Watch('value')
   handleValueChange() {
-    this.invalid = !this.textarea.checkValidity();
+    // In rare cases, the watcher may be called before render so we need to make sure the textarea exists
+    this.invalid = this.textarea ? !this.textarea.checkValidity() : false;
   }
 
   connectedCallback() {