diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index b4d1bb565..a3fc00b44 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -28,6 +28,7 @@ This release includes a complete rewrite of `` to improve accessibili - Fixed a bug in `` that caused `sl-selection-change` to emit before the DOM updated [#1096](https://github.com/shoelace-style/shoelace/issues/1096) - Fixed a bug that prevented `` from submitting a default value of `on` when no value was provided [#1103](https://github.com/shoelace-style/shoelace/discussions/1103) - Fixed a bug in `` that caused the scrollbar to show sometimes when using `resize="auto"` +- Fixed a bug in `` and `` that caused its validation states to be out of sync in some cases [#1063](https://github.com/shoelace-style/shoelace/issues/1063) - Reorganized all components to make class structures more consistent - Updated some incorrect default values for design tokens in the docs [#1097](https://github.com/shoelace-style/shoelace/issues/1097) - Updated non-public fields to use the `private` keyword (these were previously private only by convention, but now TypeScript will warn you) diff --git a/src/components/input/input.ts b/src/components/input/input.ts index e47370174..27c6a4041 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -250,6 +250,7 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont private handleInput() { this.value = this.input.value; + this.invalid = !this.checkValidity(); this.emit('sl-input'); } @@ -297,8 +298,8 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont } @watch('value', { waitUntilFirstUpdate: true }) - handleValueChange() { - this.input.value = this.value; // force a sync update + async handleValueChange() { + await this.updateComplete; this.invalid = !this.checkValidity(); } diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 40b512e34..59aa12b1a 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -190,10 +190,10 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC } @watch('value', { waitUntilFirstUpdate: true }) - handleValueChange() { - this.input.value = this.value; // force a sync update + async handleValueChange() { + await this.updateComplete; this.invalid = !this.checkValidity(); - this.updateComplete.then(() => this.setTextareaHeight()); + this.setTextareaHeight(); } /** Sets focus on the textarea. */