diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 718d9e51..0ad45d0a 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -25,7 +25,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` where the input color and input hover color wasn't using the correct design tokens [#1143](https://github.com/shoelace-style/shoelace/issues/1143) - Fixed a bug in `` that logged a console error when parsing swatches with whitespace - Fixed a bug in `` that caused selected colors to be wrong due to incorrect HSV calculations -- Fixed a bug in `` that prevented the initial value from being set as a property [#1141](https://github.com/shoelace-style/shoelace/issues/1141) +- Fixed a bug in `` that prevented the initial value from being set correct when assigned as a property [#1141](https://github.com/shoelace-style/shoelace/issues/1141) - Fixed a bug in `` that caused the checked button's right border to be incorrect [#1110](https://github.com/shoelace-style/shoelace/issues/1110) - Fixed a bug in `` that caused the animation to stop working correctly in Safari [#1121](https://github.com/shoelace-style/shoelace/issues/1121) - Fixed a bug that prevented the entire `` to be hidden when inactive diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 85efbef3..44956a48 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -92,7 +92,6 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo private readonly formControlController = new FormControlController(this); private isSafeValue = false; - private lastValueEmitted: string; private readonly localize = new LocalizeController(this); @query('[part~="input"]') input: SlInput; @@ -170,16 +169,16 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo */ @property({ reflect: true }) form = ''; - firstUpdated() { + connectedCallback() { + super.connectedCallback(); + if (this.value) { this.setColor(this.value); this.inputValue = this.value; - this.lastValueEmitted = this.value; this.syncValues(); } else { this.isEmpty = true; this.inputValue = ''; - this.lastValueEmitted = ''; } } @@ -626,7 +625,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo this.brightness = 100; this.alpha = 100; } - if (!this.isSafeValue && oldValue !== undefined) { + if (!this.isSafeValue) { const newColor = this.parseColor(newValue); if (newColor !== null) { @@ -636,13 +635,9 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo this.brightness = newColor.hsva.v; this.alpha = newColor.hsva.a * 100; } else { - this.inputValue = oldValue; + this.inputValue = oldValue ?? ''; } } - - if (this.value !== this.lastValueEmitted) { - this.lastValueEmitted = this.value; - } } /** Returns the current value as a string in the specified format. */