fix(swatch): normalize repeat selection of same item in "selects=single"

adobe · Jan 23, 2023 · ee0fb0c · ee0fb0c
1 parent 5c019c5
commit ee0fb0c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/swatch/src/SwatchGroup.ts b/packages/swatch/src/SwatchGroup.ts
@@ -119,6 +119,10 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
         if (this.selects === 'single') {
             const { target } = event;
             target.tabIndex = 0;
+            target.selected = true;
+            if (this.selectedSet.has(target.value)) {
+                return;
+            }
             this.selectedSet.clear();
             this.selectedSet.add(target.value);
             this.rovingTabindexController.elements.forEach((child) => {

diff --git a/packages/swatch/stories/swatch-group.stories.ts b/packages/swatch/stories/swatch-group.stories.ts
@@ -98,7 +98,16 @@ export default {
         },
     },
     decorators: [
-        (story: () => TemplateResult): TemplateResult => html`
+        (
+            story: () => TemplateResult,
+            {
+                args: { selected = [] },
+            }: {
+                args: {
+                    selected: string[];
+                };
+            }
+        ): TemplateResult => html`
             <div
                 @change=${async (event: Event & { target: SwatchGroup }) => {
                     await 0;
@@ -111,7 +120,7 @@ export default {
                 }}
             >
                 ${story()}
-                <div>Selected: []</div>
+                <div>Selected: ${JSON.stringify(selected)}</div>
             </div>
         `,
     ],

diff --git a/packages/swatch/test/swatch-group.test.ts b/packages/swatch/test/swatch-group.test.ts
@@ -125,6 +125,12 @@ describe('Swatch Group', () => {
         expect(changeSpy.calledOnce).to.be.true;
         expect(el.selected).to.deep.equal([selectedChild.value]);
         expect(selectedChild.selected).to.be.true;
+
+        selectedChild.click();
+
+        expect(changeSpy.calledOnce).to.be.true;
+        expect(el.selected).to.deep.equal([selectedChild.value]);
+        expect(selectedChild.selected).to.be.true;
     });
     it('can have `change` events prevented', async () => {
         el.selects = 'single';