fix(swatch): clear previously selected children when updating selected

adobe · Jul 19, 2023 · ce1bd36 · ce1bd36
1 parent ffdce16
commit ce1bd36
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git 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
@@ -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<SwatchGroup>(html`
+            <sp-swatch-group selects="single" .selected=${['color-1']}>
+                <sp-swatch value="color-0" color="red"></sp-swatch>
+                <sp-swatch value="color-1" color="green"></sp-swatch>
+                <sp-swatch value="color-2" color="blue"></sp-swatch>
+            </sp-swatch-group>
+        `);
+        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']);
+    });
 });