Merge branch '18.0.x' of https://github.com/IgniteUI/igniteui-angular into ganastasov/fix-14187-18.0.x

Author: georgianastasov

CHANGELOG.md

@@ -76,6 +76,8 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - The `contextMenu` event now fires when the end-user clicks to the right of the right-most cell in the grid in case the grid's columns don't span its full width. For this reason the event argument of the event is now of type `IGridContextMenuEventArgs` which contains the row object as well as the cell one. The latter will be `null` if the event didn't originate from a cell. **This is not a breaking change** as the new type extends the old.
+- `IgxSimpleCombo`
+    - **Behavioral Change** The `selectionChanging` event will now trigger when typing the first character in the input if there is a previously selected value in the `IgxSimpleCombo`.
 
 ## 17.1.0
 ### New Features

projects/igniteui-angular/migrations/update-18_0_0/index.ts

@@ -92,7 +92,7 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
                         return s;
                     }
                     // ref - https://angular.dev/reference/configs/workspace-config#styles-and-scripts-configuration
-                    if (s instanceof Object && 'input' in s) {
+                    if (typeof s === "object" && 'input' in s) {
                         return s.input as string;
                     }
                 })

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts

@@ -525,6 +525,35 @@ describe('IgxMonthPicker', () => {
         expect(monthPicker.activeViewChanged.emit).toHaveBeenCalled();
         expect(monthPicker.activeView).toEqual('year');
     });
+
+    it('should emit viewDateChanged event when changing year with arrow buttons', () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        const monthPicker = fixture.componentInstance.monthPicker;
+        spyOn(monthPicker.viewDateChanged, 'emit');
+
+        fixture.detectChanges();
+
+        const dom = fixture.debugElement;
+        const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+        const next = dom.query(By.css('.igx-calendar-picker__next'));
+
+        UIInteractions.simulateMouseDownEvent(prev.nativeElement);
+        fixture.detectChanges();
+
+        expect(monthPicker.viewDateChanged.emit).toHaveBeenCalledWith({
+            previousValue: new Date(2019, 1, 1),
+            currentValue: new Date(2018, 1, 1)
+        });
+
+        UIInteractions.simulateMouseDownEvent(next.nativeElement);
+        UIInteractions.simulateMouseDownEvent(next.nativeElement);
+        fixture.detectChanges();
+
+        expect(monthPicker.viewDateChanged.emit).toHaveBeenCalledWith({
+            previousValue: new Date(2018, 1, 1),
+            currentValue: new Date(2019, 1, 1)
+        });
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -117,6 +117,11 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
         if (this.isDecadeView) {
             this.viewDate = CalendarDay.from(this.viewDate).add('year', -15).native;
         }
+
+        this.viewDateChanged.emit({
+            previousValue: this.previousViewDate,
+            currentValue: this.viewDate,
+        });
     }
 
     /**
@@ -134,6 +139,11 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
         if (this.isDecadeView) {
             this.viewDate = CalendarDay.from(this.viewDate).add('year', 15).native;
         }
+
+        this.viewDateChanged.emit({
+            previousValue: this.previousViewDate,
+            currentValue: this.viewDate,
+        });
     }
 
 	/**

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -28,7 +28,7 @@ import { caseSensitive } from '@igniteui/material-icons-extended';
 import { noop, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IgxSelectionAPIService } from '../core/selection';
-import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs, isNaNvalue, rem } from '../core/utils';
+import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs, rem } from '../core/utils';
 import { SortingDirection } from '../data-operations/sorting-strategy';
 import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxIconService } from '../icon/icon.service';
@@ -46,6 +46,7 @@ import { ComboResourceStringsEN, IComboResourceStrings } from '../core/i18n/comb
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { DOCUMENT } from '@angular/common';
 import { Size } from '../grids/common/enums';
+import { isEqual } from 'lodash-es';
 
 export const IGX_COMBO_COMPONENT = /*@__PURE__*/new InjectionToken<IgxComboBase>('IgxComboComponentToken');
 
@@ -1288,9 +1289,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         }
 
         return keys.map(key => {
-            const item = isNaNvalue(key)
-                ? this.data.find(entry => isNaNvalue(entry[this.valueKey]))
-                : this.data.find(entry => entry[this.valueKey] === key);
+            const item = this.data.find(entry => isEqual(entry[this.valueKey], key));
 
             return item !== undefined ? item : { [this.valueKey]: key };
         });

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -2343,6 +2343,55 @@ describe('igxCombo', () => {
                 expect(combo.value).toEqual([]);
                 expect(combo.displayValue).toEqual('Selected Count: 0');
             });
+            it('should handle selection for combo with array type value key correctly - issue #14103', () => {
+                fixture = TestBed.createComponent(ComboArrayTypeValueKeyComponent);
+                fixture.detectChanges();
+                combo = fixture.componentInstance.combo;
+                input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+                const items = fixture.componentInstance.items;
+                expect(combo).toBeDefined();
+
+                const selectionSpy = spyOn(combo.selectionChanging, 'emit');
+                let expectedResults: IComboSelectionChangingEventArgs = {
+                    newValue: [combo.data[1][combo.valueKey]],
+                    oldValue: [],
+                    newSelection: [combo.data[1]],
+                    oldSelection: [],
+                    added: [combo.data[1]],
+                    removed: [],
+                    event: undefined,
+                    owner: combo,
+                    displayText: `${combo.data[1][combo.displayKey]}`,
+                    cancel: false
+                };
+
+                let expectedDisplayText = items[1][combo.displayKey];
+                combo.select([fixture.componentInstance.items[1].value]);
+                fixture.detectChanges();
+
+                expect(selectionSpy).toHaveBeenCalledWith(expectedResults);
+                expect(input.nativeElement.value).toEqual(expectedDisplayText);
+
+                expectedDisplayText = `${items[1][combo.displayKey]}, ${items[2][combo.displayKey]}`;
+                expectedResults = {
+                    newValue: [combo.data[1][combo.valueKey], combo.data[2][combo.valueKey]],
+                    oldValue: [combo.data[1][combo.valueKey]],
+                    newSelection: [combo.data[1], combo.data[2]],
+                    oldSelection: [combo.data[1]],
+                    added: [combo.data[2]],
+                    removed: [],
+                    event: undefined,
+                    owner: combo,
+                    displayText: expectedDisplayText,
+                    cancel: false
+                };
+
+                combo.select([items[2].value]);
+                fixture.detectChanges();
+
+                expect(selectionSpy).toHaveBeenCalledWith(expectedResults);
+                expect(input.nativeElement.value).toEqual(expectedDisplayText);
+            });
         });
         describe('Grouping tests: ', () => {
             beforeEach(() => {
@@ -3768,3 +3817,32 @@ export class IgxComboBindingDataAfterInitComponent implements AfterViewInit {
         }, 1000);
     }
 }
+
+@Component({
+    template: `
+        <igx-combo [data]="items" valueKey="value" displayKey="item"></igx-combo>`,
+    standalone: true,
+    imports: [IgxComboComponent]
+})
+export class ComboArrayTypeValueKeyComponent {
+    @ViewChild(IgxComboComponent, { read: IgxComboComponent, static: true })
+    public combo: IgxComboComponent;
+    public items: any[] = [];
+
+    constructor() {
+        this.items = [
+            {
+                item: "Item1",
+                value: [1, 2, 3]
+            },
+            {
+                item: "Item2",
+                value: [4, 5, 6]
+            },
+            {
+                item: "Item3",
+                value: [7, 8, 9]
+            }
+        ];
+    }
+}

projects/igniteui-angular/src/lib/core/utils.ts

@@ -226,15 +226,6 @@ export const isEqual = (obj1, obj2): boolean => {
     return obj1 === obj2;
 };
 
-/**
- * Checks if provided variable is the value NaN
- *
- * @param value Value to check
- * @returns true if provided variable is NaN
- * @hidden
- */
- export const isNaNvalue = (value: any): boolean => isNaN(value) && value !== undefined && typeof value !== 'string';
-
 /**
  * Utility service taking care of various utility functions such as
  * detecting browser features, general cross browser DOM manipulation, etc.
@@ -624,8 +615,8 @@ export function* intoChunks<T>(arr: T[], size: number) {
 }
 
 /**
- * @param size 
- * @returns string that represents the --component-size default value 
+ * @param size
+ * @returns string that represents the --component-size default value
  */
 export function getComponentCssSizeVar(size: string) {
     switch (size) {

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -1626,7 +1626,7 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
             }
             if (this.igxForScrollOrientation === 'horizontal') {
                 // in case collection has changes, reset sync service
-                this.syncService.setMaster(this, true);
+                this.syncService.setMaster(this, this.igxGridForOfUniqueSizeCache);
             }
         }
         const defaultItemSize = 'igxForItemSize';

projects/igniteui-angular/src/lib/directives/for-of/for_of.sync.service.ts

@@ -21,6 +21,11 @@ export class IgxForOfSyncService {
      */
     public setMaster(directive: IgxGridForOfDirective<any, any[]>, forced = false) {
         const orientation = directive.igxForScrollOrientation;
+        // in case master is not in dom, set a new master
+        const isMasterInDom = this._master.get(orientation)?.dc?.instance?._viewContainer.element.nativeElement.isConnected;
+        if (!isMasterInDom) {
+            forced = true;
+        }
         if (orientation && (forced || !this._master.has(orientation))) {
             this._master.set(orientation, directive);
         }

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -930,7 +930,7 @@ export interface GridType extends IGridDataBindable {
     /** Represents the last search in the grid
      * It contains the search text (the user has entered), the match and some settings for the search
      */
-    lastSearchInfo: ISearchInfo;
+    readonly lastSearchInfo: ISearchInfo;
     /** @hidden @internal */
     page: number;
     /** @hidden @internal */