From 88a76859085bf4cc12badc2d4ea609530cd30ba2 Mon Sep 17 00:00:00 2001 From: Damyan Petev Date: Wed, 8 Nov 2023 09:00:43 +0200 Subject: [PATCH] fix(combos): displayValue as actual string --- CHANGELOG.md | 2 + .../igniteui-angular/src/lib/combo/README.md | 6 +- .../src/lib/combo/combo.common.ts | 6 +- .../src/lib/combo/combo.component.html | 4 +- .../src/lib/combo/combo.component.spec.ts | 72 +++++------ .../src/lib/combo/combo.component.ts | 7 -- .../simple-combo/simple-combo.component.html | 2 +- .../simple-combo.component.spec.ts | 116 +++++++++--------- 8 files changed, 106 insertions(+), 109 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7b7814d7e59..3f98cbc509b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,8 @@ All notable changes for each version of this project will be documented in this Note: In remote data scenarios with `valueKey` set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the `valueKey` property. - **Breaking Change** The `value` and `selection` properties now correctly return a single value or data item instead of the same wrapped in array and `undefined` instead of empty array, matching the values emitted from selection event and when working with `formControlName`/`ngModel` directives. +- `IgxCombo`,`IgxSimpleCombo` + - **Breaking Change** The `displayValue` property now returns the display text as expected (instead of display values in array). ## 16.1.4 ### New Features diff --git a/projects/igniteui-angular/src/lib/combo/README.md b/projects/igniteui-angular/src/lib/combo/README.md index 20e016d5b5a..e0975393788 100644 --- a/projects/igniteui-angular/src/lib/combo/README.md +++ b/projects/igniteui-angular/src/lib/combo/README.md @@ -299,7 +299,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti | Name | Description | Type | |-----------------------|---------------------------------------------------|-----------------------------| | `id` | combo id | string | -| `data` | combo data source | any | +| `data` | combo data source | any[] | | `allowCustomValue` | enables/disables combo custom value | boolean | | `filterable` | enables/disables combo drop down filtering - enabled by default | boolean | | `showSearchCaseIcon` | defines whether the search case-sensitive icon should be displayed - disabled by default | boolean | @@ -328,7 +328,9 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti ### Getters | Name | Description | Type | |--------------------------|---------------------------------------------------|-----------------------------| -| `value` | the value of the combo text field | string | +| `displayValue` | the value of the combo text field | string | +| `value` | the value of the combo | any[] | +| `selection` | the selected items of the combo | any[] | ### Outputs diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 241900abc48..c8bac9571e7 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -814,8 +814,8 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement * let comboDisplayValue = this.combo.displayValue; * ``` */ - public get displayValue(): string[] { - return this._displayValue ? this._displayValue.split(', ') : []; + public get displayValue(): string { + return this._displayValue; } /** @@ -1076,7 +1076,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement * let mySelection = this.combo.selection; * ``` */ - public get selection() { + public get selection(): any[] { const items = Array.from(this.selectionService.get(this.id)); return this.convertKeysToItems(items); } diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html index de0cd97c184..d3b47e8f43b 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo.component.html @@ -8,7 +8,7 @@ - - diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 55a09642423..757adbfac66 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -99,13 +99,13 @@ describe('igxCombo', () => { combo.registerOnTouched(mockNgControl.registerOnTouchedCb); // writeValue - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); mockSelection.get.and.returnValue(new Set(['test'])); spyOnProperty(combo, 'isRemote').and.returnValue(false); combo.writeValue(['test']); expect(mockNgControl.registerOnChangeCb).not.toHaveBeenCalled(); expect(mockSelection.select_items).toHaveBeenCalledWith(combo.id, ['test'], true); - expect(combo.displayValue).toEqual(['test']); + expect(combo.displayValue).toEqual('test'); expect(combo.value).toEqual(['test']); // setDisabledState @@ -733,7 +733,7 @@ describe('igxCombo', () => { const item = combo.data.slice(0, 1); combo.select(item, true); combo.handleClearItems(spyObj); - expect(combo.displayValue).toEqual([item[0]]); + expect(combo.displayValue).toEqual(item[0]); }); it('should allow canceling and overwriting of item addition', fakeAsync(() => { @@ -1341,17 +1341,17 @@ describe('igxCombo', () => { const spyObj = jasmine.createSpyObj('event', ['stopPropagation']); combo.toggle(); combo.select([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]); - expect(combo.displayValue).toEqual([`${selectedItems[0][combo.displayKey]}`, `${selectedItems[1][combo.displayKey]}`]); + expect(combo.displayValue).toEqual(`${selectedItems[0][combo.displayKey]}, ${selectedItems[1][combo.displayKey]}`); expect(combo.selection).toEqual([selectedItems[0], selectedItems[1]]); expect(combo.value).toEqual([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]); // Clear items while they are in view combo.handleClearItems(spyObj); expect(combo.selection).toEqual([]); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.value).toEqual([]); selectedItems = [combo.data[2], combo.data[3]]; combo.select([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]); - expect(combo.displayValue).toEqual([`${selectedItems[0][combo.displayKey]}`, `${selectedItems[1][combo.displayKey]}`]); + expect(combo.displayValue).toEqual(`${selectedItems[0][combo.displayKey]}, ${selectedItems[1][combo.displayKey]}`); // Scroll selected items out of view combo.virtualScrollContainer.scrollTo(40); @@ -1360,9 +1360,9 @@ describe('igxCombo', () => { combo.handleClearItems(spyObj); expect(combo.selection).toEqual([]); expect(combo.value).toEqual([]); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); combo.select([combo.data[7][combo.valueKey]]); - expect(combo.displayValue).toEqual([combo.data[7][combo.displayKey]]); + expect(combo.displayValue).toEqual(combo.data[7][combo.displayKey]); }); it('should add selected items to the input when data is loaded', async () => { expect(combo.selection.length).toEqual(0); @@ -1375,7 +1375,7 @@ describe('igxCombo', () => { expect(combo.value.length).toEqual(2); const firstItem = combo.data[combo.data.length - 1]; - expect(combo.displayValue).toEqual([firstItem[combo.displayKey]]); + expect(combo.displayValue).toEqual(firstItem[combo.displayKey]); combo.toggle(); @@ -1385,7 +1385,7 @@ describe('igxCombo', () => { fixture.detectChanges(); const secondItem = combo.data[combo.data.length - 1]; - expect(combo.displayValue).toEqual([`${firstItem[combo.displayKey]}`, `${secondItem[combo.displayKey]}`]); + expect(combo.displayValue).toEqual(`${firstItem[combo.displayKey]}, ${secondItem[combo.displayKey]}`); }); it('should fire selectionChanging event with partial data for items out of view', async () => { const selectionSpy = spyOn(combo.selectionChanging, 'emit').and.callThrough(); @@ -2132,7 +2132,7 @@ describe('igxCombo', () => { item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['0']); + expect(combo.displayValue).toEqual('0'); expect(combo.value).toEqual([0]); expect(combo.selection).toEqual([{ field: '0', value: 0 }]); @@ -2143,7 +2143,7 @@ describe('igxCombo', () => { item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['0', 'false']); + expect(combo.displayValue).toEqual('0, false'); expect(combo.value).toEqual([0, false]); expect(combo.selection).toEqual([{ field: '0', value: 0 }, { field: 'false', value: false }]); @@ -2154,7 +2154,7 @@ describe('igxCombo', () => { item3.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['0', 'false', '']); + expect(combo.displayValue).toEqual('0, false, '); expect(combo.value).toEqual([0, false, '']); expect(combo.selection).toEqual([{ field: '0', value: 0 }, { field: 'false', value: false }, { field: '', value: '' }]); @@ -2165,7 +2165,7 @@ describe('igxCombo', () => { item4.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['0', 'false', '', 'null']); + expect(combo.displayValue).toEqual('0, false, , null'); expect(combo.value).toEqual([0, false, '', null]); expect(combo.selection).toEqual([{ field: '0', value: 0 }, { field: 'false', value: false }, { field: '', value: '' }, { field: 'null', value: null }]); @@ -2176,7 +2176,7 @@ describe('igxCombo', () => { item5.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['0', 'false', '', 'null', 'NaN']); + expect(combo.displayValue).toEqual('0, false, , null, NaN'); expect(combo.value).toEqual([0, false, '', null, NaN]); expect(combo.selection).toEqual([{ field: '0', value: 0 }, { field: 'false', value: false }, { field: '', value: '' }, { field: 'null', value: null }, { field: 'NaN', value: NaN }]); @@ -2188,7 +2188,7 @@ describe('igxCombo', () => { item6.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['0', 'false', '', 'null', 'NaN']); + expect(combo.displayValue).toEqual('0, false, , null, NaN'); expect(combo.value).toEqual([0, false, '', null, NaN]); expect(combo.selection).toEqual([{ field: '0', value: 0 }, { field: 'false', value: false }, { field: '', value: '' }, { field: 'null', value: null }, { field: 'NaN', value: NaN }]); @@ -2208,33 +2208,33 @@ describe('igxCombo', () => { combo.writeValue([0]); expect(combo.selection).toEqual([{ field: '0', value: 0 }]); expect(combo.value).toEqual([0]); - expect(combo.displayValue).toEqual(['0']); + expect(combo.displayValue).toEqual('0'); combo.writeValue([false]); expect(combo.selection).toEqual([{ field: 'false', value: false }]); expect(combo.value).toEqual([false]); - expect(combo.displayValue).toEqual(['false']); + expect(combo.displayValue).toEqual('false'); combo.writeValue(['']); expect(combo.selection).toEqual([{ field: 'empty', value: '' }]); expect(combo.value).toEqual(['']); - expect(combo.displayValue).toEqual(['empty']); + expect(combo.displayValue).toEqual('empty'); combo.writeValue([null]); expect(combo.selection).toEqual([{ field: 'null', value: null }]); expect(combo.value).toEqual([null]); - expect(combo.displayValue).toEqual(['null']); + expect(combo.displayValue).toEqual('null'); combo.writeValue([NaN]); expect(combo.selection).toEqual([{ field: 'NaN', value: NaN }]); expect(combo.value).toEqual([NaN]); - expect(combo.displayValue).toEqual(['NaN']); + expect(combo.displayValue).toEqual('NaN'); // should not select undefined combo.writeValue([undefined]); expect(combo.selection).toEqual([]); expect(combo.value).toEqual([]); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); }); it('should select values that have spaces as prefixes/suffixes', fakeAsync(() => { combo.displayKey = combo.valueKey = 'value'; @@ -2266,7 +2266,7 @@ describe('igxCombo', () => { combo.onBlur(); tick(); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['Mississippi ']); + expect(combo.displayValue).toEqual('Mississippi '); })); it('should prevent selection when selectionChanging is cancelled', () => { spyOn(combo.selectionChanging, 'emit').and.callFake((event: IComboSelectionChangingEventArgs) => event.cancel = true); @@ -2326,13 +2326,13 @@ describe('igxCombo', () => { expect(combo.selection).toEqual([{ key: 1, value: 'One' }]); expect(combo.value).toEqual([1]); - expect(combo.displayValue).toEqual(['Selected Count: 1']); + expect(combo.displayValue).toEqual('Selected Count: 1'); combo.deselect([1]); expect(combo.selection).toEqual([]); expect(combo.value).toEqual([]); - expect(combo.displayValue).toEqual(['Selected Count: 0']); + expect(combo.displayValue).toEqual('Selected Count: 0'); }); }); describe('Grouping tests: ', () => { @@ -2713,7 +2713,7 @@ describe('igxCombo', () => { combo.toggle(); fixture.detectChanges(); expect(combo.selection).toEqual([]); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.value).toEqual([]); expect(combo.comboInput.nativeElement.value).toEqual(''); @@ -2767,7 +2767,7 @@ describe('igxCombo', () => { combo.handleInputChange(); fixture.detectChanges(); expect(combo.collapsed).toBeFalsy(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.isAddButtonVisible()).toBeTruthy(); combo.handleKeyUp(UIInteractions.getKeyboardEvent('keyup', 'ArrowDown')); @@ -2776,13 +2776,13 @@ describe('igxCombo', () => { UIInteractions.triggerEventHandlerKeyDown('Space', dropdownContent); fixture.detectChanges(); expect(combo.collapsed).toBeFalsy(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.isAddButtonVisible()).toBeTruthy(); UIInteractions.triggerEventHandlerKeyDown('Enter', dropdownContent); fixture.detectChanges(); expect(combo.collapsed).toBeFalsy(); - expect(combo.displayValue).toEqual(['My New Custom Item']); + expect(combo.displayValue).toEqual('My New Custom Item'); }); it(`should handle click on "Add Item" properly`, () => { combo.allowCustomValues = true; @@ -2793,7 +2793,7 @@ describe('igxCombo', () => { combo.handleInputChange(); fixture.detectChanges(); expect(combo.collapsed).toBeFalsy(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.isAddButtonVisible()).toBeTruthy(); combo.handleKeyUp(UIInteractions.getKeyboardEvent('keyup', 'ArrowDown')); @@ -2803,13 +2803,13 @@ describe('igxCombo', () => { fixture.detectChanges(); // SPACE does not add item to collection expect(combo.collapsed).toBeFalsy(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); const focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); focusedItem.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); expect(combo.collapsed).toBeFalsy(); - expect(combo.displayValue).toEqual(['My New Custom Item']); + expect(combo.displayValue).toEqual('My New Custom Item'); }); it('should enable/disable filtering at runtime', fakeAsync(() => { combo.open(); // Open combo - all data items are in filteredData @@ -3236,7 +3236,7 @@ describe('igxCombo', () => { expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL); expect(combo.selection).toEqual([{ field: 'Missouri', region: 'West North Central' }]); expect(combo.value).toEqual(['Missouri']); - expect(combo.displayValue).toEqual(['Missouri']); + expect(combo.displayValue).toEqual('Missouri'); expect(model.valid).toBeTrue(); expect(model.touched).toBeFalse(); @@ -3246,7 +3246,7 @@ describe('igxCombo', () => { expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL); expect(combo.selection).toEqual([{ field: 'Missouri', region: 'West North Central' }]); expect(combo.value).toEqual(['Missouri']); - expect(combo.displayValue).toEqual(['Missouri']); + expect(combo.displayValue).toEqual('Missouri'); expect(model.valid).toBeTrue(); expect(model.touched).toBeFalse(); @@ -3257,7 +3257,7 @@ describe('igxCombo', () => { expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL); expect(combo.selection).toEqual([]); expect(combo.value).toEqual([]); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(model.valid).toBeFalse(); expect(model.touched).toBeFalse(); expect(model.dirty).toBeFalse(); @@ -3277,7 +3277,7 @@ describe('igxCombo', () => { expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL); expect(combo.selection).toEqual([{ field: 'New Jersey', region: 'Mid-Atlan' }]); expect(combo.value).toEqual(['New Jersey']); - expect(combo.displayValue).toEqual(['New Jersey']); + expect(combo.displayValue).toEqual('New Jersey'); expect(model.valid).toBeTrue(); expect(model.touched).toBeTrue(); expect(model.dirty).toBeFalse(); diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index ef632f5f99a..4293d45c310 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -180,13 +180,6 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie @ViewChild(IgxComboDropDownComponent, { static: true }) public dropdown: IgxComboDropDownComponent; - /** - * @hidden @internal - */ - public get inputEmpty(): boolean { - return this.displayValue.length === 0 && !this.placeholder; - } - /** @hidden @internal */ public get filteredData(): any[] | null { return this.filteringOptions.filterable ? this._filteredData : this.data; diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html index ed3a5271552..d2f244d15b7 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html @@ -12,7 +12,7 @@ - { const item = combo.data.slice(0, 1); combo.select(item); combo.handleClear(spyObj); - expect(combo.displayValue).toEqual([item[0]]); + expect(combo.displayValue).toEqual(item[0]); }); }); @@ -756,7 +756,7 @@ describe('IgxSimpleCombo', () => { expect(combo.value).toEqual('Three'); combo.handleClear(new MouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); })); it('should properly bind to values w/o valueKey', fakeAsync(() => { @@ -786,17 +786,17 @@ describe('IgxSimpleCombo', () => { combo.toggle(); combo.select(combo.data[1][combo.valueKey]); - expect(combo.displayValue).toEqual([`${selectedItem[combo.displayKey]}`]); + expect(combo.displayValue).toEqual(`${selectedItem[combo.displayKey]}`); expect(combo.selection).toEqual(selectedItem); expect(combo.value).toEqual(selectedItem[combo.valueKey]); // Clear items while they are in view combo.handleClear(spyObj); expect(combo.selection).toEqual(undefined); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.value).toEqual(undefined); selectedItem = combo.data[2]; combo.select(combo.data[2][combo.valueKey]); - expect(combo.displayValue).toEqual([`${selectedItem[combo.displayKey]}`]); + expect(combo.displayValue).toEqual(`${selectedItem[combo.displayKey]}`); // Scroll selected items out of view combo.virtualScrollContainer.scrollTo(40); @@ -804,10 +804,10 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); combo.handleClear(spyObj); expect(combo.selection).toEqual(undefined); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.value).toEqual(undefined); combo.select(combo.data[7][combo.valueKey]); - expect(combo.displayValue).toEqual([combo.data[7][combo.displayKey]]); + expect(combo.displayValue).toEqual(combo.data[7][combo.displayKey]); })); }); @@ -926,12 +926,12 @@ describe('IgxSimpleCombo', () => { UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement); expect(combo.selection).toBeDefined() - expect(combo.displayValue).toEqual(['Wisconsin']); + expect(combo.displayValue).toEqual('Wisconsin'); UIInteractions.triggerEventHandlerKeyDown('Tab', input); fixture.detectChanges(); expect(combo.selection).toBeDefined() - expect(combo.displayValue).toEqual(['Wisconsin']); + expect(combo.displayValue).toEqual('Wisconsin'); }); it('should display the AddItem button when allowCustomValues is true and there is a partial match', fakeAsync(() => { @@ -1123,7 +1123,7 @@ describe('IgxSimpleCombo', () => { expect((combo as any).clearSelection).toHaveBeenCalledOnceWith(true); expect(combo.dropdown.closing.emit).toHaveBeenCalledTimes(1); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); }); it('should not clear the selection and input on blur with a match', () => { @@ -1146,7 +1146,7 @@ describe('IgxSimpleCombo', () => { UIInteractions.triggerEventHandlerKeyDown('Tab', input); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['Apple']); + expect(combo.displayValue).toEqual('Apple'); expect(combo.selection).toBeDefined() }); @@ -1163,7 +1163,7 @@ describe('IgxSimpleCombo', () => { UIInteractions.triggerEventHandlerKeyDown('Tab', input); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).not.toBeDefined() }); @@ -1215,7 +1215,7 @@ describe('IgxSimpleCombo', () => { item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); combo.open(); fixture.detectChanges(); @@ -1224,7 +1224,7 @@ describe('IgxSimpleCombo', () => { item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['val2']); + expect(combo.displayValue).toEqual('val2'); combo.open(); fixture.detectChanges(); @@ -1233,7 +1233,7 @@ describe('IgxSimpleCombo', () => { item3.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); combo.open(); fixture.detectChanges(); @@ -1242,7 +1242,7 @@ describe('IgxSimpleCombo', () => { item5.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); }); it('should select falsy values except "undefined"', () => { @@ -1264,7 +1264,7 @@ describe('IgxSimpleCombo', () => { item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['0']); + expect(combo.displayValue).toEqual('0'); expect(combo.value).toEqual(0); expect(combo.selection).toEqual({ field: '0', value: 0 }); @@ -1275,7 +1275,7 @@ describe('IgxSimpleCombo', () => { item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['false']); + expect(combo.displayValue).toEqual('false'); expect(combo.value).toEqual(false); expect(combo.selection).toEqual({ field: 'false', value: false }); @@ -1286,7 +1286,7 @@ describe('IgxSimpleCombo', () => { item3.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.value).toEqual(''); expect(combo.selection).toEqual({ field: '', value: '' }); @@ -1297,7 +1297,7 @@ describe('IgxSimpleCombo', () => { item4.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['null']); + expect(combo.displayValue).toEqual('null'); expect(combo.value).toEqual(null); expect(combo.selection).toEqual({ field: 'null', value: null }); @@ -1308,7 +1308,7 @@ describe('IgxSimpleCombo', () => { item5.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['NaN']); + expect(combo.displayValue).toEqual('NaN'); expect(combo.value).toEqual(NaN); expect(combo.selection).toEqual({ field: 'NaN', value: NaN }); @@ -1321,7 +1321,7 @@ describe('IgxSimpleCombo', () => { item6.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['NaN']); + expect(combo.displayValue).toEqual('NaN'); expect(combo.value).toEqual(NaN); expect(combo.selection).toEqual({ field: 'NaN', value: NaN }); }); @@ -1341,33 +1341,33 @@ describe('IgxSimpleCombo', () => { combo.writeValue(0); expect(combo.value).toEqual(0); expect(combo.selection).toEqual({ field: '0', value: 0 }); - expect(combo.displayValue).toEqual(['0']); + expect(combo.displayValue).toEqual('0'); combo.writeValue(false); expect(combo.value).toEqual(false); expect(combo.selection).toEqual({ field: 'false', value: false }); - expect(combo.displayValue).toEqual(['false']); + expect(combo.displayValue).toEqual('false'); combo.writeValue(''); expect(combo.value).toEqual(''); expect(combo.selection).toEqual({ field: 'empty', value: '' }); - expect(combo.displayValue).toEqual(['empty']); + expect(combo.displayValue).toEqual('empty'); combo.writeValue(null); expect(combo.value).toEqual(null); expect(combo.selection).toEqual({ field: 'null', value: null }); - expect(combo.displayValue).toEqual(['null']); + expect(combo.displayValue).toEqual('null'); combo.writeValue(NaN); expect(combo.value).toEqual(NaN); expect(combo.selection).toEqual({ field: 'NaN', value: NaN }); - expect(combo.displayValue).toEqual(['NaN']); + expect(combo.displayValue).toEqual('NaN'); // should not select undefined combo.writeValue(undefined); expect(combo.value).toEqual(undefined); expect(combo.selection).toEqual(undefined); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); }); it('should toggle dropdown list on clicking a templated toggle icon', fakeAsync(() => { @@ -1486,7 +1486,7 @@ describe('IgxSimpleCombo', () => { combo.onBlur(); tick(); fixture.detectChanges(); - expect(combo.displayValue).toEqual(['Ohio ']); + expect(combo.displayValue).toEqual('Ohio '); })); }); @@ -1627,7 +1627,7 @@ describe('IgxSimpleCombo', () => { item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1640,7 +1640,7 @@ describe('IgxSimpleCombo', () => { item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1653,7 +1653,7 @@ describe('IgxSimpleCombo', () => { item3.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1677,7 +1677,7 @@ describe('IgxSimpleCombo', () => { item4.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1690,7 +1690,7 @@ describe('IgxSimpleCombo', () => { item5.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1717,21 +1717,21 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); combo.writeValue(null); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID); combo.writeValue(''); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID); combo.writeValue(undefined); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1752,21 +1752,21 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); combo.writeValue(null); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID); combo.writeValue(''); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID); combo.writeValue(undefined); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1805,7 +1805,7 @@ describe('IgxSimpleCombo', () => { reactiveForm.resetForm(); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INITIAL); @@ -1820,7 +1820,7 @@ describe('IgxSimpleCombo', () => { item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1835,7 +1835,7 @@ describe('IgxSimpleCombo', () => { item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1850,7 +1850,7 @@ describe('IgxSimpleCombo', () => { item3.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1865,7 +1865,7 @@ describe('IgxSimpleCombo', () => { reactiveForm.resetForm(); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INITIAL); @@ -1880,7 +1880,7 @@ describe('IgxSimpleCombo', () => { item4.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1895,7 +1895,7 @@ describe('IgxSimpleCombo', () => { item5.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1917,7 +1917,7 @@ describe('IgxSimpleCombo', () => { reactiveForm.resetForm(); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INITIAL); @@ -1929,7 +1929,7 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); combo.writeValue(null); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1938,7 +1938,7 @@ describe('IgxSimpleCombo', () => { expect(reactiveControl.status).toEqual('INVALID'); combo.writeValue(''); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1947,7 +1947,7 @@ describe('IgxSimpleCombo', () => { expect(reactiveControl.status).toEqual('INVALID'); combo.writeValue(undefined); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1963,7 +1963,7 @@ describe('IgxSimpleCombo', () => { reactiveForm.resetForm(); fixture.detectChanges(); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INITIAL); @@ -1975,7 +1975,7 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); combo.writeValue(null); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1984,7 +1984,7 @@ describe('IgxSimpleCombo', () => { expect(reactiveControl.status).toEqual('INVALID'); combo.writeValue(''); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -1993,7 +1993,7 @@ describe('IgxSimpleCombo', () => { expect(reactiveControl.status).toEqual('INVALID'); combo.writeValue(undefined); - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); expect(combo.selection).toEqual(undefined); expect(combo.value).toEqual(undefined); expect(combo.valid).toEqual(IgxInputState.INVALID); @@ -2092,7 +2092,7 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); expect(combo.selection).toBeDefined() - expect(combo.displayValue).toEqual([`${selectedItem[combo.displayKey]}`]); + expect(combo.displayValue).toEqual(`${selectedItem[combo.displayKey]}`); expect(combo.value).toEqual(selectedItem[combo.valueKey]); })); it('should set combo.displayValue to empty string when bound to remote data and selected item\'s data is not present', (async () => { @@ -2105,7 +2105,7 @@ describe('IgxSimpleCombo', () => { combo.select(15); expect(combo.selection).toBeDefined() - expect(combo.displayValue).toEqual([]); + expect(combo.displayValue).toEqual(''); combo.toggle(); @@ -2115,7 +2115,7 @@ describe('IgxSimpleCombo', () => { fixture.detectChanges(); const selectedItem = combo.data[combo.data.length - 1]; - expect(combo.displayValue).toEqual([`${selectedItem[combo.displayKey]}`]); + expect(combo.displayValue).toEqual(`${selectedItem[combo.displayKey]}`); })); it('should clear input on blur when bound to remote data and no item is selected', () => { input.triggerEventHandler('focus', {});