diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index cf432ea1f..b4b9ad412 100644 --- a/docs/resources/changelog.md +++ b/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 `` to affect scrolling when initializing [#1292](https://github.com/shoelace-style/shoelace/issues/1292) - Fixed a bug in `` that allowed the hover state to show when focused [#1282](https://github.com/shoelace-style/shoelace/issues/1282) - Fixed a bug in `` that prevented interactive elements from receiving clicks [#1262](https://github.com/shoelace-style/shoelace/issues/1262) +- Fixed a bug in `` 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 `` when used inside a flex container [#1235](https://github.com/shoelace-style/shoelace/pull/1235) - Improved the behavior of `` to support buttons and other interactive elements [#1234](https://github.com/shoelace-style/shoelace/issues/1234) - Improved the performance of `` to prevent an apparent memory leak in some browsers [#1284](https://github.com/shoelace-style/shoelace/pull/1284) diff --git a/src/components/input/input.ts b/src/components/input/input.ts index b0825ef8a..54ac09e70 100644 --- a/src/components/input/input.ts +++ b/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;