From 4866d2d190433ed5168eb8f03fee571604b62470 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 2 Mar 2022 12:19:59 -0500
Subject: [PATCH] fix valueAsDate and valueAsNumber bug

---
 .eslintrc.cjs                      |  2 +-
 docs/resources/changelog.md        |  1 +
 src/components/input/input.test.ts | 20 ++++++++++++++++++++
 src/components/input/input.ts      | 18 +++++++++++-------
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7619dd6b..c1ecb086 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -69,7 +69,7 @@ module.exports = {
         '@typescript-eslint/no-invalid-void-type': 'error',
         '@typescript-eslint/no-require-imports': 'error',
         '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',
-        '@typescript-eslint/no-unnecessary-condition': 'warn',
+        '@typescript-eslint/no-unnecessary-condition': 'off',
         '@typescript-eslint/no-unnecessary-qualifier': 'warn',
         '@typescript-eslint/non-nullable-type-assertion-style': 'warn',
         '@typescript-eslint/prefer-for-of': 'warn',
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 4f0da733..9629d3a6 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)
 - Added Prettier and ESLint to markdown files
 - Fixed a bug that prevented forms from submitting when pressing <kbd>Enter</kbd> inside of an `<sl-input>` [#700](https://github.com/shoelace-style/shoelace/issues/700)
+- Fixed a bug in `<sl-input>` that prevented the `valueAsDate` and `valueAsNumber` properties from working when set before the component was initialized
 - Improved `autofocus` behavior in Safari for `<sl-dialog>` and `<sl-drawer>` [#693](https://github.com/shoelace-style/shoelace/issues/693)
 - Removed feature detection for `focus({ preventScroll })` since it no longer works in Safari
 
diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts
index e26c87d8..23fb8d90 100644
--- a/src/components/input/input.test.ts
+++ b/src/components/input/input.test.ts
@@ -44,4 +44,24 @@ describe('<sl-input>', () => {
 
     expect(submitHandler).to.have.been.calledOnce;
   });
+
+  it('should set the value as a date when using valueAsDate', async () => {
+    const el = await fixture<SlInput>(html` <sl-input type="date"></sl-input> `);
+    const today = new Date();
+
+    el.valueAsDate = today;
+    await el.updateComplete;
+
+    expect(el.value).to.equal(today.toISOString().split('T')[0]);
+  });
+
+  it('should set the value as a number when using valueAsNumber', async () => {
+    const el = await fixture<SlInput>(html` <sl-input type="number"></sl-input> `);
+    const num = 12345;
+
+    el.valueAsNumber = num;
+    await el.updateComplete;
+
+    expect(el.value).to.equal(num.toString());
+  });
 });
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index ebecf3a9..8cac1fcd 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -144,22 +144,26 @@ export default class SlInput extends LitElement {
 
   /** Gets or sets the current value as a `Date` object. Only valid when `type` is `date`. */
   get valueAsDate() {
-    return this.input.valueAsDate!;
+    return this.input?.valueAsDate ?? null;
   }
 
-  set valueAsDate(newValue: Date) {
-    this.input.valueAsDate = newValue;
-    this.value = this.input.value;
+  set valueAsDate(newValue: Date | null) {
+    this.updateComplete.then(() => {
+      this.input.valueAsDate = newValue;
+      this.value = this.input.value;
+    });
   }
 
   /** Gets or sets the current value as a number. */
   get valueAsNumber() {
-    return this.input.valueAsNumber;
+    return this.input?.valueAsNumber ?? parseFloat(this.value);
   }
 
   set valueAsNumber(newValue: number) {
-    this.input.valueAsNumber = newValue;
-    this.value = this.input.value;
+    this.updateComplete.then(() => {
+      this.input.valueAsNumber = newValue;
+      this.value = this.input.value;
+    });
   }
 
   firstUpdated() {