From f980126e8178c9c0528a8483d8041c39f101a3b9 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 22 Jun 2022 09:18:34 -0400
Subject: [PATCH] fixes #796

---
 docs/resources/changelog.md   |  1 +
 src/components/input/input.ts | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index fc31b43d5..f69390491 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -13,6 +13,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `required` attribute to `<sl-radio-group>` and fixed constraint validation logic to support custom validation
 - Added the `checked-icon` part to `<sl-menu-item>`
 - Fixed a bug where a duplicate clear button showed in Firefox [#791](https://github.com/shoelace-style/shoelace/issues/791)
+- Fixed a bug where setting `valueAsDate` or `valueAsNumber` too early on `<sl-input>` would throw an error [#796](https://github.com/shoelace-style/shoelace/issues/796)
 - Updated the `fieldset` attribute so it reflects in `<sl-radio-group>`
 
 ## 2.0.0-beta.76
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index b93ec642e..9381ef0a5 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -161,8 +161,11 @@ export default class SlInput extends LitElement {
   }
 
   set valueAsDate(newValue: Date | null) {
-    this.input.valueAsDate = newValue;
-    this.value = this.input.value;
+    // We use an in-memory input instead of the one in the template because the property can be set before render
+    const input = document.createElement('input');
+    input.type = 'date';
+    input.valueAsDate = newValue;
+    this.value = input.value;
   }
 
   /** Gets or sets the current value as a number. */
@@ -171,8 +174,11 @@ export default class SlInput extends LitElement {
   }
 
   set valueAsNumber(newValue: number) {
-    this.input.valueAsNumber = newValue;
-    this.value = this.input.value;
+    // We use an in-memory input instead of the one in the template because the property can be set before render
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.valueAsNumber = newValue;
+    this.value = input.value;
   }
 
   firstUpdated() {