From a4f0ae9088af6332e25baedb99cf86e49979dea9 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Fri, 7 Jul 2023 13:51:22 -0400 Subject: [PATCH] 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 | 2 +- src/components/input/input.ts | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 6c415285d..1623301cf 100644 --- a/docs/pages/resources/changelog.md +++ b/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 `` [#1416] - Added support for pressing [[Space]] to select/toggle selected `` elements [#1429] +- Fixed a bug in `valueAsDate` on `` where it would always set `type="date"` for the underlying `` 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 `` where the `background` attribute was never passed to the QR code [#1416] - Fixed a bug in `` where aria attributes were incorrectly applied to the default `` causing Lighthouse errors [#1417] - Fixed a bug in `` 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 diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 4d80890e5..3f4b17571 100644 --- a/src/components/input/input.ts +++ b/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 `` 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; }