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

…lected (#13813) * fix(button): Trigger changes to the buttongroup when a button is deselected * fix(buttonGroup): Resolve failing unit tests * test(buttongroup): Add unit tests for the deselection of a button * test(buttongroup): Apply suggestion for unit test improvement * chore(CHANGELOG): Update the changelog with the deselection behavioral change * Update CHANGELOG.md * Update CHANGELOG.md according to the PR suggestions Co-authored-by: Simeon Simeonoff <[email protected]> --------- Co-authored-by: Hristo <[email protected]> Co-authored-by: Simeon Simeonoff <[email protected]>
IgniteUI · Jan 23, 2024 · 4ffb58b · 4ffb58b
1 parent a7aa23e
commit 4ffb58b
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxPivotGrid`
     - `IPivotDimension` interface now exposes a property called `displayName` similar to the one in the `IPivotValue` interface. This property is optional and will be displayed inside the chips for rows and columns in the `IgxPivotGrid`. If the `displayName` proeprty is not set, `memberName` will be used as a fallback.
 - New directive -  `igxIconButton` directive that provides a way to use an icon as a fully functional button has been added. The new `igxIconButton` comes in three types - flat, outlined and contained (default). All `igxButton`'s with type `icon` will be automatically migrated to the new `igxIconButton`'s with `ng update`.
+- `IgxButton`
+    - **Behavioral Change** `buttonSelected` event is now emitted not only when a button gets selected, but also when it gets deselected. A benefit of that is when updating the value bound to the `selected` input of an `IgxButton`, the button group in which the button resides is now able to update the styling of the button from selected to deselected. If this event was used in a scenario where it is assumed that the button gets selected, it's a good idea the logic to be branched now based on `eventArgs.selected` condition.
 
 ### General
 - `igxButton`:

diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/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;
-}
+}
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/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;
+}
diff --git a/projects/igniteui-angular/src/lib/directives/button/button.directive.ts b/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
+            });
+
         }
     }