fix(buttonGroup): issue with MutationObserver wrongly deselecting buttons (#14072)

Co-authored-by: Plamen Dobrev <[email protected]>

Author: ChronosSF

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -357,8 +357,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
             return;
         }
 
-        this.updateSelected(index);
-
         const button = this.buttons[index];
         button.select();
     }
@@ -387,12 +385,28 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
             this.buttons.forEach((_, i) => {
                 if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
                     this.deselectButton(i);
+                    this.updateDeselected(i);
                 }
             });
         }
 
     }
 
+    public updateDeselected(index: number) {
+        const button = this.buttons[index];
+        if (this.selectedIndexes.indexOf(index) !== -1) {
+            this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);
+        }
+
+        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'false');
+        this._renderer.removeClass(button.nativeElement, 'igx-button-group__item--selected');
+
+        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
+        if (indexInViewButtons !== -1) {
+            this.values[indexInViewButtons].selected = false;
+        }
+    }
+
     /**
      * Deselects a button by its index.
      * ```typescript
@@ -412,16 +426,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         }
 
         const button = this.buttons[index];
-        this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);
-
-        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'false');
-        this._renderer.removeClass(button.nativeElement, 'igx-button-group__item--selected');
         button.deselect();
-
-        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
-        if (indexInViewButtons !== -1) {
-            this.values[indexInViewButtons].selected = false;
-        }
     }
 
     /**
@@ -497,8 +502,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * @hidden
      */
     public _clickHandler(index: number) {
-        this.mutationObserver.disconnect();
-
         const button = this.buttons[index];
         const args: IButtonGroupEventArgs = { owner: this, button, index };
 
@@ -519,8 +522,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
                 this.deselected.emit(args);
             }
         }
-
-        this.mutationObserver?.observe(this._el.nativeElement, this.observerConfig);
     }
 
     private setMutationsObserver() {
@@ -544,7 +545,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
                 observer.observe(this._el.nativeElement, this.observerConfig);
 
                 // Cleanup function
-                this._renderer.listen(this._el.nativeElement, 'DOMNodeRemoved', () => {
+                this._renderer.listen(this._el.nativeElement, 'DOMAttrModified', () => {
                     observer.disconnect();
                 });
             });
@@ -567,11 +568,11 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 
     private updateButtonSelectionState(index: number, args: IButtonGroupEventArgs) {
-        if (this.selectedIndexes.indexOf(index) === -1) {
-            this.selectButton(index);
+        if (this.buttons[index].selected) {
+            this.updateSelected(index);
             this.selected.emit(args);
         } else {
-            this.deselectButton(index);
+            this.updateDeselected(index);
             this.deselected.emit(args);
         }
     }