From e127ee7ee7c4234a47a17b75516299df853598de Mon Sep 17 00:00:00 2001
From: Riva Ivanova <49126110+RivaIvanova@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:27:23 +0300
Subject: [PATCH] feat(button-group): clear selection via selectedItems (#1168)

* feat(button-group): clear selection via `selectedItems`
---
 CHANGELOG.md                                  |  4 +++
 .../button-group/button-group.spec.ts         | 28 +++++++++++++++++++
 src/components/button-group/button-group.ts   | 11 +++++---
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ccae78081..0e5ac0bb4 100644
--- 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
index c4de0791e..33a8f23c4 100644
--- 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
index 75e930db2..a768b0b46 100644
--- 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;