fix(button): Trigger changes to the buttongroup when a button is deselected

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

@@ -366,22 +366,27 @@ 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 +513,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,19 @@ 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;
+
+ fixture.componentInstance.selectedValue = 100;
+ fixture.detectChanges();
+
+ expect(btnGroupInstance.selectedButtons.length).toBe(0);
+ expect(btnGroupInstance.buttons[1].selected).toBe(false);
+ });
+
 });
 
 @Component({
@@ -484,3 +499,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

@@ -106,13 +106,13 @@ export class IgxButtonDirective extends IgxButtonBaseDirective {
  @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
+ });
+
  }
  }