Merge pull request #14383 from IgniteUI/bpachilova/comboArrayValueKey-14103-18.0.x

fix(combo): Properly handle selection when value key is array - 18.0.x

Author: kacheshmarova

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) {