fix(simple-combo): preserve selection when bound to remote data - 15.0.x (#12385)

* fix(simple-combo): preserve selection when bound to remote data #12289

* fix(combo-common): allow custom displayText on selection #12222

* test(combos): add tests covering the code

* chore(*): add remote simple combo sample

* fix(simple-combo): register remote entry if selection is truthy

* refactor(simple-combo): remove unnecessary return

Author: RivaIvanova

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

@@ -986,12 +986,12 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         });
     }
 
-        /** @hidden @internal */
-        public ngDoCheck() {
-            if (this.data?.length && this.selection.length) {
-                this._value = this.createDisplayText(this.selection, []);
-            }
+    /** @hidden @internal */
+    public ngDoCheck() {
+        if (this.data?.length && this.selection.length && !this._value) {
+            this._value = this.createDisplayText(this.selection, []);
         }
+    }
 
     /** @hidden @internal */
     public ngOnDestroy() {

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

@@ -2243,6 +2243,29 @@ describe('igxCombo', () => {
             const expectedOutput = 'One';
             expect(input.nativeElement.value).toEqual(expectedOutput);
         }));
+        it('should display custom displayText on selection/deselection', () => {
+            combo.valueKey = 'key';
+            combo.displayKey = 'value';
+            combo.data = [
+                { key: 1, value: 'One' },
+                { key: 2, value: 'Two' },
+                { key: 3, value: 'Three' },
+            ];
+
+            spyOn(combo.selectionChanging, 'emit').and.callFake(
+                (event: IComboSelectionChangingEventArgs) => event.displayText = `Selected Count: ${event.newSelection.length}`);
+
+            combo.select([1]);
+            fixture.detectChanges();
+
+            expect(combo.selection).toEqual([1]);
+            expect(combo.value).toBe('Selected Count: 1');
+
+            combo.deselect([1]);
+
+            expect(combo.selection).toEqual([]);
+            expect(combo.value).toBe('Selected Count: 0');
+        });
     });
     describe('Grouping tests: ', () => {
         configureTestSuite();

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

@@ -53,7 +53,7 @@ describe('IgxSimpleCombo', () => {
     let fixture: ComponentFixture<any>;
     let combo: IgxSimpleComboComponent;
     let input: DebugElement;
-    
+
     configureTestSuite();
 
     describe('Unit tests: ', () => {
@@ -1291,7 +1291,7 @@ describe('IgxSimpleCombo', () => {
 
             expect(toggleIcon.nativeElement.textContent).toBe('search');
             expect(combo.collapsed).toBeTruthy();
-            
+
             toggleIcon.nativeElement.click();
             tick();
             fixture.detectChanges();
@@ -1304,6 +1304,20 @@ describe('IgxSimpleCombo', () => {
 
             expect(combo.collapsed).toBeTruthy();
         }));
+
+        it('should clear the selection when typing in the input', () => {
+            combo.select('Wisconsin');
+            fixture.detectChanges();
+
+            expect(combo.selection.length).toEqual(1);
+
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            UIInteractions.simulateTyping('L', input, 9, 10);
+            fixture.detectChanges();
+            expect(combo.selection.length).toEqual(0);
+        });
     });
 
     describe('Display density', () => {
@@ -1783,6 +1797,7 @@ describe('IgxSimpleCombo', () => {
             fixture = TestBed.createComponent(IgxComboRemoteDataComponent);
             fixture.detectChanges();
             combo = fixture.componentInstance.instance;
+            input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
         });
         it('should prevent registration of remote entries when selectionChanging is cancelled', () => {
             spyOn(combo.selectionChanging, 'emit').and.callFake((event: IComboSelectionChangingEventArgs) => event.cancel = true);
@@ -1807,6 +1822,29 @@ describe('IgxSimpleCombo', () => {
             const expectedOutput = 'One';
             expect(input.nativeElement.value).toEqual(expectedOutput);
         }));
+        it('should not clear selection when bound to remote data and item is out of view', (async () => {
+            expect(combo.valueKey).toBeDefined();
+            expect(combo.selection.length).toEqual(0);
+
+            let selectedItem = combo.data[1];
+            combo.toggle();
+            combo.select(combo.data[1][combo.valueKey]);
+
+            // Scroll selected item out of view
+            combo.virtualScrollContainer.scrollTo(40);
+            await wait();
+            fixture.detectChanges();
+
+            input.nativeElement.focus();
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            fixture.detectChanges();
+
+            expect(combo.selection.length).toEqual(1);
+            expect(combo.value).toEqual(`${selectedItem[combo.displayKey]}`);
+            expect(combo.selection).toEqual([selectedItem[combo.valueKey]]);
+        }));
     });
 });
 
@@ -1898,8 +1936,8 @@ export class IgxSimpleComboIconTemplatesComponent {
     public combo: IgxSimpleComboComponent;
 
     public data: any[] =  [
-        { name: 'Sofia', id: '1' }, 
-        { name: 'London', id: '2' }, 
+        { name: 'Sofia', id: '1' },
+        { name: 'London', id: '2' },
     ];;
     public name!: string;
 }

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

@@ -261,6 +261,9 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.clearSelection();
             this._onChangeCallback(null);
         }
+        if (this.selection.length) {
+            this.selectionService.clear(this.id);
+        }
         // when filtering the focused item should be the first item or the currently selected item
         if (!this.dropdown.focusedItem || this.dropdown.focusedItem.id !== this.dropdown.items[0].id) {
             this.dropdown.navigateFirst();
@@ -464,6 +467,28 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         return newSelection[0]?.toString() || '';
     }
 
+    protected getRemoteSelection(newSelection: any[], oldSelection: any[]): string {
+        if (!newSelection.length) {
+            this.registerRemoteEntries(oldSelection, false);
+            return '';
+        }
+
+        this.registerRemoteEntries(oldSelection, false);
+        this.registerRemoteEntries(newSelection);
+        return Object.keys(this._remoteSelection).map(e => this._remoteSelection[e])[0];
+    }
+
+    /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
+    protected registerRemoteEntries(ids: any[], add = true) {
+        const selection = this.getValueDisplayPairs(ids)[0];
+
+        if (add && selection) {
+            this._remoteSelection[selection[this.valueKey]] = selection[this.displayKey].toString();
+        } else {
+            delete this._remoteSelection[ids[0]];
+        }
+    }
+
     private clearSelection(ignoreFilter?: boolean): void {
         let newSelection = this.selectionService.get_empty();
         if (this.filteredData.length !== this.data.length && !ignoreFilter) {
@@ -473,11 +498,19 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
     }
 
     private clearOnBlur(): void {
+        if (this.isRemote) {
+            const searchValue = this.searchValue || this.comboInput.value;
+            const remoteValue = Object.keys(this._remoteSelection).map(e => this._remoteSelection[e])[0];
+            if (remoteValue && searchValue !== remoteValue) {
+                this.clear();
+            }
+            return;
+        }
+
         const filtered = this.filteredData.find(this.findMatch);
         // selecting null in primitive data returns undefined as the search text is '', but the item is null
         if (filtered === undefined && this.selectedItem !== null || !this.selection.length) {
             this.clear();
-            return;
         }
     }
 
@@ -488,8 +521,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
 
     private clear(): void {
         this.clearSelection(true);
-        this._internalFilter = '';
-        this.searchValue = '';
+        this.comboInput.value = this._internalFilter = this._value = this.searchValue = '';
     }
 
     private isValid(value: any): boolean {

src/app/combo/combo.sample.html

@@ -68,13 +68,22 @@ <h5 class="sample-title">Reactive Form</h5>
             <div>
                 <h5 class="sample-title">Remote Binding</h5>
                 <igx-combo #remoteCombo class="input-container" [itemsMaxHeight]="250" [itemHeight]="48"
-                    [data]="rData | async" [valueKey]="'ProductID'" [displayKey]="'ProductName'"
+                    [data]="rData | async" [valueKey]="'ProductID'" [displayKey]="'ProductName'" placeholder="Product(s)"
                     (dataPreLoad)="dataLoading()" (searchInputUpdate)="searchInput($event)"
                     (selectionChanging)="handleSelectionChanging($event)" (closing)="onClosing()"
-                    (opening)="onOpening()" placeholder="Location(s)">
+                    (opening)="onOpening()">
+                    <label igxLabel>Combo</label>
                 </igx-combo>
                 <igx-toast #loadingToast></igx-toast>
 
+                <igx-simple-combo #remoteSimpleCombo class="input-container" [itemsMaxHeight]="250" [itemHeight]="48"
+                    [data]="rData | async" [valueKey]="'ProductID'" [displayKey]="'ProductName'" placeholder="Product"
+                    (dataPreLoad)="onSimpleComboDataLoading()" (closing)="onSimpleComboClosing()"
+                    (opened)="onSimpleComboOpened()" (closed)="onSimpleComboClosed()"
+                    (selectionChanging)="onSimpleComboSelectionChanging($event)"
+                    (searchInputUpdate)="onSimpleComboSearchInputUpdate($event)">
+                    <label igxLabel>Simple Combo</label>
+                </igx-simple-combo>
             </div>
 
             <div class="input-row">

src/app/combo/combo.sample.ts

@@ -10,6 +10,7 @@ import {
     IChangeSwitchEventArgs,
     IComboSearchInputEventArgs,
     IComboSelectionChangingEventArgs,
+    ISimpleComboSelectionChangingEventArgs,
     IForOfState,
     IgxComboComponent,
     IgxSimpleComboComponent,
@@ -40,6 +41,9 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     @ViewChild('remoteCombo')
     public remoteCombo: IgxComboComponent;
 
+    @ViewChild('remoteSimpleCombo')
+    public remoteSimpleCombo: IgxSimpleComboComponent;
+
     @ViewChild('playgroundCombo', { read: ElementRef, static: true })
     private comboRef: ElementRef;
 
@@ -59,11 +63,17 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     public singleValue = 'Arizona';
     public values2: Array<any>;
     public isDisabled = false;
+
     public rData: any;
+    public prevRequest: any;
+    public simpleComboPrevRequest: any;
     private searchText: string = '';
     private defaultVirtState: IForOfState = { chunkSize: 6, startIndex: 0 };
+    private currentVirtState: IForOfState = { chunkSize: 6, startIndex: 0 };
     private hasSelection: boolean;
-    public prevRequest: any;
+    private additionalScroll: number = 0;
+    private itemID = 1;
+    private itemCount: number = 0;
 
     public valueKeyVar = 'field';
     public currentDataType = '';
@@ -219,7 +229,8 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
             chunkSize: Math.ceil(250 / this.remoteCombo.itemHeight),
         };
         this.remoteService.getData(initSize, null, (data) => {
-            this.remoteCombo.totalItemCount = data['@odata.count'];
+            this.remoteCombo.totalItemCount = this.remoteSimpleCombo.totalItemCount = data['@odata.count'];
+            this.itemCount = this.remoteSimpleCombo.totalItemCount;
         });
     }
 
@@ -319,4 +330,81 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     public handleSelectionChanging(evt: IComboSelectionChangingEventArgs) {
         this.hasSelection = !!evt?.newSelection.length;
     }
+
+    public onSimpleComboDataLoading() {
+        if (this.simpleComboPrevRequest) {
+            this.simpleComboPrevRequest.unsubscribe();
+        }
+        this.loadingToast.positionSettings.verticalDirection = VerticalAlignment.Middle;
+        this.loadingToast.autoHide = false;
+        this.loadingToast.open('Loading Remote Data...');
+        this.cdr.detectChanges();
+
+        this.simpleComboPrevRequest = this.remoteService.getData(
+            this.remoteSimpleCombo.virtualizationState,
+            this.searchText,
+            (data) => {
+                this.remoteSimpleCombo.totalItemCount = data['@odata.count'];
+                this.loadingToast.close();
+                this.cdr.detectChanges();
+            }
+        );
+    }
+
+    public onSimpleComboOpened() {
+        const scroll: number = this.remoteSimpleCombo.virtualScrollContainer.getScrollForIndex(this.itemID - 1);
+        this.remoteSimpleCombo.virtualScrollContainer.scrollPosition = scroll + this.additionalScroll;
+        this.cdr.detectChanges();
+    }
+
+    public onSimpleComboClosing() {
+        this.searchText = '';
+    }
+
+    public onSimpleComboClosed() {
+        this.currentVirtState.startIndex = (this.itemID || 1) - 1;
+        this.remoteService.getData(
+            this.currentVirtState,
+            this.searchText,
+            (data) => {
+                this.remoteSimpleCombo.totalItemCount = data['@odata.count'];
+                this.cdr.detectChanges();
+            }
+        );
+    }
+
+    public onSimpleComboSelectionChanging(evt: ISimpleComboSelectionChangingEventArgs) {
+        this.hasSelection = evt.newSelection !== undefined;
+
+        if (!this.hasSelection) {
+            this.itemID = 1;
+            this.currentVirtState = this.defaultVirtState;
+            return;
+        }
+
+        this.currentVirtState.chunkSize = Math.ceil(this.remoteSimpleCombo.itemsMaxHeight / this.remoteSimpleCombo.itemHeight);
+
+        this.itemCount === evt.newSelection ?
+            this.additionalScroll = this.remoteSimpleCombo.itemHeight :
+            this.additionalScroll = 0;
+
+        if (this.itemCount - evt.newSelection >= this.currentVirtState.chunkSize - 1) {
+            this.itemID = this.currentVirtState.startIndex = evt.newSelection;
+        } else {
+            this.itemID = this.currentVirtState.startIndex = this.itemCount - (this.currentVirtState.chunkSize - 1);
+        }
+    }
+
+    public onSimpleComboSearchInputUpdate(searchData: IComboSearchInputEventArgs) {
+        this.currentVirtState.startIndex = 0;
+        this.currentVirtState.chunkSize = Math.ceil(this.remoteSimpleCombo.itemsMaxHeight / this.remoteSimpleCombo.itemHeight);
+        this.searchText = searchData?.searchText || '';
+        this.remoteService.getData(
+            this.searchText ? this.currentVirtState : this.defaultVirtState,
+            this.searchText,
+            (data) => {
+                this.remoteSimpleCombo.totalItemCount = data['@odata.count'];
+            }
+        );
+    }
 }