Merge branch '17.0.x' into bpachilova/fix-13762-17.0.x

Author: teodosiah

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
+            });
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts

@@ -543,6 +543,53 @@ describe('IgxGrid - Row Selection #grid', () => {
             }
         });
 
+        it('Should select the correct rows with Shift + Click when grouping is activated', () => {
+            expect(grid.selectRowOnClick).toBe(true);
+            spyOn(grid.rowSelectionChanging, 'emit').and.callThrough();
+
+            grid.groupBy({
+                fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false
+            });
+
+            fix.detectChanges();
+
+            const firstGroupRow = grid.gridAPI.get_row_by_index(1);
+            const lastGroupRow = grid.gridAPI.get_row_by_index(4);
+
+            // Clicking on the first row within a group
+            UIInteractions.simulateClickEvent(firstGroupRow.nativeElement);
+            fix.detectChanges();
+
+            GridSelectionFunctions.verifyRowSelected(firstGroupRow);
+
+            // Simulate Shift+Click on a row within another group
+            const mockEvent = new MouseEvent('click', { shiftKey: true });
+            lastGroupRow.nativeElement.dispatchEvent(mockEvent);
+            fix.detectChanges();
+
+            expect(grid.selectedRows).toEqual([5, 14, 8]); // ids
+            expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
+            expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
+                added: [grid.dataView[2], grid.dataView[4]],
+                cancel: false,
+                event: jasmine.anything(),
+                newSelection: [grid.dataView[1], grid.dataView[2], grid.dataView[4]],
+                oldSelection: [grid.dataView[1]],
+                removed: [],
+                allRowsSelected: false,
+                owner: grid
+            });
+
+            const expectedSelectedRowIds = [5, 14, 8];
+            grid.dataView.forEach((rowData, index) => {
+                if (expectedSelectedRowIds.includes(rowData.ProductID)) {
+                    const row = grid.gridAPI.get_row_by_index(index);
+                    GridSelectionFunctions.verifyRowSelected(row);
+                }
+            });
+
+        });
+
         it('Should NOT select multiple rows with Shift + Click when selectRowOnClick has false value', () => {
             grid.selectRowOnClick = false;
             spyOn(grid.rowSelectionChanging, 'emit').and.callThrough();

projects/igniteui-angular/src/lib/grids/selection/selection.service.ts

@@ -689,7 +689,7 @@ export class IgxGridSelectionService {
     /** Returns all data in the grid, with applied filtering and sorting and without deleted rows. */
     public get allData(): Array<any> {
         let allData;
-        if (this.isFilteringApplied() || this.grid.sortingExpressions.length) {
+        if (this.isFilteringApplied() || this.grid.sortingExpressions.length || this.grid.groupingExpressions?.length) {
             allData = this.grid.pinnedRecordsCount ? this.grid._filteredSortedUnpinnedData : this.grid.filteredSortedData;
         } else {
             allData = this.grid.gridAPI.get_all_data(true);