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

Author: georgianastasov

CHANGELOG.md

@@ -28,6 +28,7 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxSimpleCombo`
     - **Behavioral Change** When bound to `ngModel` and `formControlName` directives, the model would not be updated when the user types into the input and will only be updated on selection.
+    - **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

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

@@ -30,7 +30,7 @@ import { noop, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 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 {
 import { IComboItemAdditionEvent, IComboSearchInputEventArgs } from './public_api';
 import { ComboResourceStringsEN, IComboResourceStrings } from '../core/i18n/combo-resources';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
+import { isEqual } from 'lodash-es';
 
 export const IGX_COMBO_COMPONENT = /*@__PURE__*/new InjectionToken<IgxComboBase>('IgxComboComponentToken');
 
@@ -1282,9 +1283,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         }
 
         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

@@ -2342,6 +2342,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(() => {
@@ -3797,3 +3846,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/density.ts

@@ -193,6 +193,7 @@ export class DisplayDensityBase implements DoCheck, OnInit {
 
     /**
      * Sets the `--component-size` CSS variable based on the value of Display Density
+     * @hidden @internal
      */
     public getComponentSizeStyles() {
         switch (this._displayDensity || this.oldDisplayDensityOptions.displayDensity) {

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.

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

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