From 9bea517ae8a8a980b02a0b62e24bbee37b11beb7 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 25 Jan 2021 16:06:43 -0500
Subject: [PATCH] Fixes #313

---
 docs/getting-started/changelog.md    | 1 +
 src/components/input/input.tsx       | 3 ++-
 src/components/textarea/textarea.tsx | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index b9e4cf5a5..ec8bb6262 100644
--- a/docs/getting-started/changelog.md
+++ b/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
 
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 692a43a5b..fb9667504 100644
--- a/src/components/input/input.tsx
+++ b/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. */
diff --git a/src/components/textarea/textarea.tsx b/src/components/textarea/textarea.tsx
index 29cb1bd9c..e68da8d09 100644
--- a/src/components/textarea/textarea.tsx
+++ b/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() {