fixes #760

docs/resources/changelog.md

@@ -15,6 +15,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that caused a console error when setting `value` to `null` or `undefined` in `<sl-input>`, `<sl-select>`, and `<sl-textarea>` [#751](https://github.com/shoelace-style/shoelace/pull/751)
 - Fixed a bug that caused `<sl-checkbox>` and `<sl-radio>` controls without a `value` to submit as `null` instead of `on` like native inputs [#744](https://github.com/shoelace-style/shoelace/issues/744)
 - Fixed a bug that caused `<sl-dropdown>` and dependent components to add unexpected padding around the panel [#743](https://github.com/shoelace-style/shoelace/issues/743)
+- Fixed a bug that prevented `valueAsDate` and `valueAsNumber` from updating synchronously [#760](https://github.com/shoelace-style/shoelace/issues/760)
 - Improved behavior of clearable and password toggle buttons in `<sl-input>` and `<sl-select>` [#745](https://github.com/shoelace-style/shoelace/issues/745)
 - Improved performance of `<sl-select>` by caching menu items instead of traversing for them each time
 - Improved drag utility so initial click/touch events can be accepted [#758](https://github.com/shoelace-style/shoelace/issues/758)

src/components/input/input.test.ts

@@ -23,7 +23,6 @@ describe('<sl-input>', () => {
       const today = new Date();
 
       el.valueAsDate = today;
-      await el.updateComplete;
 
       expect(el.value).to.equal(today.toISOString().split('T')[0]);
     });
@@ -33,7 +32,6 @@ describe('<sl-input>', () => {
       const num = 12345;
 
       el.valueAsNumber = num;
-      await el.updateComplete;
 
       expect(el.value).to.equal(num.toString());
     });

src/components/input/input.ts

@@ -161,10 +161,8 @@ export default class SlInput extends LitElement {
   }
 
   set valueAsDate(newValue: Date | null) {
-    this.updateComplete.then(() => {
-      this.input.valueAsDate = newValue;
-      this.value = this.input.value;
-    });
+    this.input.valueAsDate = newValue;
+    this.value = this.input.value;
   }
 
   /** Gets or sets the current value as a number. */
@@ -173,10 +171,8 @@ export default class SlInput extends LitElement {
   }
 
   set valueAsNumber(newValue: number) {
-    this.updateComplete.then(() => {
-      this.input.valueAsNumber = newValue;
-      this.value = this.input.value;
-    });
+    this.input.valueAsNumber = newValue;
+    this.value = this.input.value;
   }
 
   firstUpdated() {