fixes #1302

docs/resources/changelog.md

@@ -20,6 +20,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug that caused `<sl-tab-group>` to affect scrolling when initializing [#1292](https://github.com/shoelace-style/shoelace/issues/1292)
 - Fixed a bug in `<sl-menu-item>` that allowed the hover state to show when focused [#1282](https://github.com/shoelace-style/shoelace/issues/1282)
 - Fixed a bug in `<sl-carousel>` that prevented interactive elements from receiving clicks [#1262](https://github.com/shoelace-style/shoelace/issues/1262)
+- Fixed a bug in `<sl-input>` that caused `valueAsDate` and `valueAsNumber` to not be set synchronously in some cases [#1302](https://github.com/shoelace-style/shoelace/issues/1302)
 - Improved the behavior of `<sl-carousel>` when used inside a flex container [#1235](https://github.com/shoelace-style/shoelace/pull/1235)
 - Improved the behavior of `<sl-tree-item>` to support buttons and other interactive elements [#1234](https://github.com/shoelace-style/shoelace/issues/1234)
 - Improved the performance of `<sl-include>` to prevent an apparent memory leak in some browsers [#1284](https://github.com/shoelace-style/shoelace/pull/1284)

src/components/input/input.ts

@@ -190,13 +190,20 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
    */
   @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
 
+  //
+  // NOTE: We use an in-memory input for these getters/setters instead of the one in the template because the properties
+  // can be set before the component is rendered.
+  //
+
   /** Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. */
   get valueAsDate() {
-    return this.input?.valueAsDate ?? null;
+    const input = document.createElement('input');
+    input.type = 'date';
+    input.value = this.value;
+    return input.valueAsDate;
   }
 
   set valueAsDate(newValue: Date | null) {
-    // 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;
@@ -205,11 +212,13 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
 
   /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
   get valueAsNumber() {
-    return this.input?.valueAsNumber ?? parseFloat(this.value);
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.value = this.value;
+    return input.valueAsNumber;
   }
 
   set valueAsNumber(newValue: number) {
-    // 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;