Merge pull request #13818 from IgniteUI/pdobrev/13801-deselecting-button-17.0.x

fix(buttonGroup): Deselect a button when the value of the selected pr…

Author: kdinev

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

@@ -366,21 +366,25 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
             this.selectedIndexes.push(index);
         }
 
-        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');
-        this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');
+        if (button.selected) {
+            this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');
+            this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');
 
-        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
-        if (indexInViewButtons !== -1) {
+            const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
+            if (indexInViewButtons !== -1) {
             this.values[indexInViewButtons].selected = true;
-        }
+            }
 
-        // deselect other buttons if selectionMode is not multi
-        if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {
-            this.buttons.forEach((_, i) => {
-                if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
-                    this.deselectButton(i);
-                }
-            });
+            // deselect other buttons if selectionMode is not multi
+            if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {
+                this.buttons.forEach((_, i) => {
+                    if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
+                        this.deselectButton(i);
+                    }
+                });
+            }
+        } else {
+            this.deselectButton(index);
         }
     }
 
@@ -508,4 +512,4 @@ export interface IButtonGroupEventArgs extends IBaseEventArgs {
     owner: IgxButtonGroupComponent;
     button: IgxButtonDirective;
     index: number;
-}
+}

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

@@ -6,6 +6,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions } from '../test-utils/ui-interactions.spec';
 import { IgxButtonDirective } from '../directives/button/button.directive';
 import { getComponentSize } from '../core/utils';
+import { NgFor } from '@angular/common';
 
 interface IButton {
     type?: string;
@@ -54,7 +55,8 @@ describe('IgxButtonGroup', () => {
                 InitButtonGroupWithValuesComponent,
                 TemplatedButtonGroupComponent,
                 TemplatedButtonGroupDesplayDensityComponent,
-                ButtonGroupWithSelectedButtonComponent
+                ButtonGroupWithSelectedButtonComponent,
+                ButtonGroupButtonWithBoundSelectedOutputComponent,
             ]
         }).compileComponents();
     }));
@@ -358,6 +360,22 @@ describe('IgxButtonGroup', () => {
         }
     });
 
+    it('should style the corresponding button as deselected when the value bound to the selected input changes', () => {
+        const fixture = TestBed.createComponent(ButtonGroupButtonWithBoundSelectedOutputComponent);
+        fixture.detectChanges();
+
+        const btnGroupInstance = fixture.componentInstance.buttonGroup;
+
+        expect(btnGroupInstance.selectedButtons.length).toBe(1);
+        expect(btnGroupInstance.buttons[1].selected).toBe(true);
+
+        fixture.componentInstance.selectedValue = 100;
+        fixture.detectChanges();
+
+        expect(btnGroupInstance.selectedButtons.length).toBe(0);
+        expect(btnGroupInstance.buttons[1].selected).toBe(false);
+    });
+
 });
 
 @Component({
@@ -484,3 +502,24 @@ class TemplatedButtonGroupDesplayDensityComponent {
 class ButtonGroupWithSelectedButtonComponent {
     @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent;
 }
+
+@Component({
+    template: `
+    <igx-buttongroup>
+        <button igxButton *ngFor="let item of items" [selected]="item.key === selectedValue">{{item.value}}</button>
+    </igx-buttongroup>
+    `,
+    standalone: true,
+    imports: [ IgxButtonGroupComponent, IgxButtonDirective, NgFor ]
+})
+class ButtonGroupButtonWithBoundSelectedOutputComponent {
+    @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent;
+
+    public items = [
+        { key: 0, value: 'Button 1' },
+        { key: 1, value: 'Button 2' },
+        { key: 2, value: 'Button 3' },
+    ];
+
+    public selectedValue = 1;
+}

projects/igniteui-angular/src/lib/directives/button/button.directive.ts

@@ -127,13 +127,12 @@ export class IgxButtonDirective extends DisplayDensityBase {
     @Input({ transform: booleanAttribute })
     public set selected(value: boolean) {
         if (this._selected !== value) {
-            if (!this._selected) {
-                this.buttonSelected.emit({
-                    button: this
-                });
-            }
 
             this._selected = value;
+
+            this.buttonSelected.emit({
+                button: this
+            });
         }
     }