fix(simple-combo): create display text only if there is bound data #12269 (#12279)

Author: jackofdiamond5

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

@@ -432,7 +432,8 @@ describe('IgxSimpleCombo', () => {
         beforeAll(waitForAsync(() => {
             TestBed.configureTestingModule({
                 declarations: [
-                    IgxSimpleComboSampleComponent
+                    IgxSimpleComboSampleComponent,
+                    IgxSimpleComboEmptyComponent
                 ],
                 imports: [
                     IgxSimpleComboModule,
@@ -631,6 +632,13 @@ describe('IgxSimpleCombo', () => {
             expect(footerHTMLElement.parentNode).toEqual(dropdownList);
             expect(footerHTMLElement.textContent).toEqual('This is a footer');
         });
+        it('should initialize the component with empty data and bindings', () => {
+            fixture = TestBed.createComponent(IgxSimpleComboEmptyComponent);
+            expect(() => {
+                fixture.detectChanges();
+            }).not.toThrow();
+            expect(fixture.componentInstance.combo).toBeDefined();
+        });
     });
 
     describe('Binding tests: ', () => {
@@ -1852,6 +1860,17 @@ class IgxSimpleComboSampleComponent {
     }
 }
 
+@Component({
+    template: `<igx-simple-combo #combo [data]="data" displayKey="test" [(ngModel)]="name"></igx-simple-combo>`
+})
+export class IgxSimpleComboEmptyComponent {
+    @ViewChild('combo', { read: IgxSimpleComboComponent, static: true })
+    public combo: IgxSimpleComboComponent;
+
+    public data: any[] = [];
+    public name!: string;
+}
+
 @Component({
     template: `<igx-simple-combo [(ngModel)]="selectedItem" [data]="items"></igx-simple-combo>`
 })

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

@@ -455,9 +455,10 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             return this.getRemoteSelection(newSelection, oldSelection);
         }
 
-        if (this.displayKey !== null && this.displayKey !== undefined
+        if (this.displayKey !== null
+            && this.displayKey !== undefined
             && newSelection.length > 0) {
-            return this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0]?.toString() || '';
+            return this.convertKeysToItems(newSelection).filter(e => e).map(e => e[this.displayKey])[0]?.toString() || '';
         }
 
         return newSelection[0]?.toString() || '';