feat(button-group): clear selection via selectedItems (#1168)

* feat(button-group): clear selection via `selectedItems`
IgniteUI · Apr 18, 2024 · e127ee7 · e127ee7
1 parent 76039f4
commit e127ee7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- Button group component now allows resetting the selection state via the `selectedItems` property [#1168](https://github.com/IgniteUI/igniteui-webcomponents/pull/1168)
+
 ## [4.8.2] - 2024-04-15
 ### Fixed
 - Textarea - resize handle position for non-suffixed textarea [#1094](https://github.com/IgniteUI/igniteui-webcomponents/issues/1094)

diff --git a/src/components/button-group/button-group.spec.ts b/src/components/button-group/button-group.spec.ts
@@ -448,6 +448,34 @@ describe('Button Group', () => {
         expect(buttonGroup.selectedItems.length).to.equal(0);
       });
 
+      it('should clear the selection when passing an empty array to `selectedItems` property', () => {
+        buttons[0].selected = true;
+
+        expect(buttonGroup.selectedItems.length).to.equal(1);
+        expect(buttonGroup.selectedItems).to.have.same.members([
+          buttons[0].value,
+        ]);
+
+        buttonGroup.selectedItems = [];
+
+        expect(buttonGroup.selectedItems.length).to.equal(0);
+        expect(buttons[0].selected).to.be.false;
+      });
+
+      it('should clear the selection when passing falsy values to `selectedItems` property', () => {
+        buttons[0].selected = true;
+
+        expect(buttonGroup.selectedItems.length).to.equal(1);
+        expect(buttonGroup.selectedItems).to.have.same.members([
+          buttons[0].value,
+        ]);
+
+        buttonGroup.selectedItems = null as unknown as string[];
+
+        expect(buttonGroup.selectedItems.length).to.equal(0);
+        expect(buttons[0].selected).to.be.false;
+      });
+
       it('initial selection through child selection attribute has higher priority', async () => {
         // single mode
         buttonGroup = await createButtonGroupComponent(`

diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
@@ -109,10 +109,8 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
   }
 
   public set selectedItems(values: string[]) {
-    if (values && values.length) {
-      this._selectedItems = new Set(values);
-      this.setSelection(this._selectedItems);
-    }
+    this._selectedItems = new Set(Array.isArray(values) ? values : []);
+    this.setSelection(this._selectedItems);
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })
@@ -205,6 +203,11 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
   }
 
   private setSelection(values: Set<string>) {
+    if (!values.size) {
+      this.toggleButtons.forEach((b) => (b.selected = false));
+      return;
+    }
+
     for (const button of this.toggleButtons) {
       if (values.has(button.value)) {
         button.selected = true;