fix: valueAsDate now falls back to native implementation (#1399)

* fix: valueAsDate now falls back to native implementation

* changelog

* prettier

* prettier

docs/pages/resources/changelog.md

@@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 - Added tests for `<sl-qr-code>` [#1416]
 - Added support for pressing [[Space]] to select/toggle selected `<sl-menu-item>` elements [#1429]
+- Fixed a bug in `valueAsDate` on `<sl-input>` where it would always set `type="date"` for the underlying `<input>` element. It now falls back to the native browser implementation for the in-memory input. This may cause unexpected behavior if you're using `valueAsDate` on any input elements that aren't `type="date"`. [#1399]
 - Fixed a bug in `<sl-qr-code>` where the `background` attribute was never passed to the QR code [#1416]
 - Fixed a bug in `<sl-dropdown>` where aria attributes were incorrectly applied to the default `<slot>` causing Lighthouse errors [#1417]
 - Fixed a bug in `<sl-carousel>` that caused navigation to work incorrectly in some case [#1420]
@@ -24,7 +25,6 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## 2.5.2
 
 - Fixed broken source buttons in the docs [#1401]
-- Fixed broken links in the docs [#1407]
 
 ## 2.5.1
 

src/components/input/input.ts

@@ -198,13 +198,17 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
   // 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. */
+  /**
+   * Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type="{{type}}">` implementation and may result in an error.
+   */
   get valueAsDate() {
+    this.__dateInput.type = this.type;
     this.__dateInput.value = this.value;
     return this.input?.valueAsDate || this.__dateInput.valueAsDate;
   }
 
   set valueAsDate(newValue: Date | null) {
+    this.__dateInput.type = this.type;
     this.__dateInput.valueAsDate = newValue;
     this.value = this.__dateInput.value;
   }