diff --git a/packages/swatch/src/SwatchGroup.ts b/packages/swatch/src/SwatchGroup.ts index 6b5e1a6c3d..4195b43e88 100644 --- a/packages/swatch/src/SwatchGroup.ts +++ b/packages/swatch/src/SwatchGroup.ts @@ -52,18 +52,7 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, { public rounding: SwatchRounding; @property({ type: Array }) - public get selected(): string[] { - return this._selected; - } - - public set selected(selected: string[]) { - if (selected === this.selected) return; - const oldSelected = this.selected; - this._selected = selected; - this.requestUpdate('selected', oldSelected); - } - - private _selected: string[] = []; + public selected: string[] = []; @property() public selects: 'single' | 'multiple' | undefined; @@ -140,7 +129,7 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, { this.selectedSet.delete(target.value); } } - this._selected = [...this.selectedSet]; + this.selected = [...this.selectedSet]; const applyDefault = this.dispatchEvent( new Event('change', { cancelable: true, @@ -168,7 +157,7 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, { this.selectedSet.delete(value); } }); - this._selected = [...this.selectedSet]; + this.selected = [...this.selectedSet]; }; private getPassthroughSwatchActions( @@ -264,7 +253,10 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, { if (changes.has('selected')) { swatchActions.push((swatch) => { currentValues.add(swatch.value); - if (nextSelected.has(swatch.value) || swatch.selected) { + if ( + nextSelected.has(swatch.value) || + (!this.hasUpdated && swatch.selected) + ) { swatch.selected = true; } else { swatch.selected = false; diff --git a/packages/swatch/test/swatch-group.test.ts b/packages/swatch/test/swatch-group.test.ts index be6338bd2e..960d451bf2 100644 --- a/packages/swatch/test/swatch-group.test.ts +++ b/packages/swatch/test/swatch-group.test.ts @@ -344,4 +344,18 @@ describe('Swatch Group - DOM selected', () => { expect(el.selected).to.deep.equal(['color-3', 'color-1']); }); + it('clears previously selected children when updating `selected`', async () => { + const el = await fixture(html` + + + + + + `); + await elementUpdated(el); + expect(el.selected).to.deep.equal(['color-1']); + el.selected = ['color-2']; + await elementUpdated(el); + expect(el.selected).to.deep.equal(['color-2']); + }); });