fix valueAsDate and valueAsNumber bug

.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',

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
 

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());
+  });
 });

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() {