Merge branch '14.1.x' into mkirova/improve-validator-aria

Author: ChronosSF

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

@@ -980,6 +980,13 @@ 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 ngOnDestroy() {
         this.destroy$.next();

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

@@ -1898,7 +1898,8 @@ describe('igxCombo', () => {
             TestBed.configureTestingModule({
                 declarations: [
                     IgxComboSampleComponent,
-                    IgxComboRemoteDataComponent
+                    IgxComboRemoteDataComponent,
+                    IgxComboBindingDataAfterInitComponent
                 ],
                 imports: [
                     IgxComboModule,
@@ -2187,6 +2188,16 @@ describe('igxCombo', () => {
             expect(combo.selection.length).toEqual(0);
             expect((combo as any)._remoteSelection[0]).toBeUndefined();
         });
+        it('should add predefined selection to the input when data is bound after initialization', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxComboBindingDataAfterInitComponent);
+            fixture.detectChanges();
+            input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+            tick(1200);
+            fixture.detectChanges();
+
+            const expectedOutput = 'One';
+            expect(input.nativeElement.value).toEqual(expectedOutput);
+        }));
     });
     describe('Grouping tests: ', () => {
         configureTestSuite();
@@ -3311,6 +3322,29 @@ class="input-container" [filterable]="true" placeholder="Location(s)"
 `
 })
 
+@Component({
+    template: `
+<form [formGroup]="reactiveForm" (ngSubmit)="onSubmitReactive()">
+<p>
+<label>First Name:</label>
+<input type="text" formControlName="firstName">
+</p>
+<p>
+<label>Password:</label>
+<input type="password" formControlName="password">
+</p>
+<p>
+<igx-combo #comboReactive formControlName="townCombo"
+class="input-container" [filterable]="true" placeholder="Location(s)"
+[data]="items" [displayKey]="'field'" [groupKey]="'region'"><label igxLabel>Town</label></igx-combo>
+</p>
+<p>
+<button type="submit" [disabled]="!reactiveForm.valid">Submit</button>
+</p>
+</form>
+`
+})
+
 class IgxComboFormComponent {
     @ViewChild('comboReactive', { read: IgxComboComponent, static: true })
     public combo: IgxComboComponent;
@@ -3583,3 +3617,22 @@ export class ComboModelBindingComponent implements OnInit {
         { text: 'Four', id: 3 }, { text: 'Five', id: 4 }];
     }
 }
+
+@Component({
+    template: `
+        <igx-combo [(ngModel)]="selectedItems" [data]="items" [valueKey]="'id'" [displayKey]="'text'"></igx-combo>`
+})
+export class IgxComboBindingDataAfterInitComponent implements AfterViewInit {
+    public items: any[] = [];
+    public selectedItems: any[] = [0];
+
+    constructor(private cdr: ChangeDetectorRef) { }
+
+    public ngAfterViewInit() {
+        setTimeout(() => {
+            this.items = [{ text: 'One', id: 0 }, { text: 'Two', id: 1 }, { text: 'Three', id: 2 },
+            { text: 'Four', id: 3 }, { text: 'Five', id: 4 }];
+            this.cdr.detectChanges();
+        }, 1000);
+    }
+}

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

@@ -1324,7 +1324,8 @@ describe('IgxSimpleCombo', () => {
         beforeAll(waitForAsync(() => {
             TestBed.configureTestingModule({
                 declarations: [
-                    IgxComboRemoteDataComponent
+                    IgxComboRemoteDataComponent,
+                    IgxSimpleComboBindingDataAfterInitComponent
                 ],
                 imports: [
                     IgxSimpleComboModule,
@@ -1352,6 +1353,17 @@ describe('IgxSimpleCombo', () => {
             expect(combo.selection.length).toEqual(0);
             expect((combo as any)._remoteSelection[0]).toBeUndefined();
         });
+        it('should add predefined selection to the input when data is bound after initialization', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxSimpleComboBindingDataAfterInitComponent);
+            fixture.detectChanges();
+            combo = fixture.componentInstance.instance;
+            input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+            tick(1200);
+            fixture.detectChanges();
+
+            const expectedOutput = 'One';
+            expect(input.nativeElement.value).toEqual(expectedOutput);
+        }));
     });
 });
 
@@ -1559,3 +1571,22 @@ class IgxSimpleComboInTemplatedFormComponent {
         }
     }
 }
+
+@Component({
+    template: `
+        <igx-simple-combo [(ngModel)]="selectedItem" [data]="items" [valueKey]="'id'" [displayKey]="'text'"></igx-simple-combo>`
+})
+export class IgxSimpleComboBindingDataAfterInitComponent implements AfterViewInit {
+    public items: any[];
+    public selectedItem: number = 1;
+
+    constructor(private cdr: ChangeDetectorRef) { }
+
+    public ngAfterViewInit() {
+        setTimeout(() => {
+            this.items = [{ text: 'One', id: 1 }, { text: 'Two', id: 2 }, { text: 'Three', id: 3 },
+            { text: 'Four', id: 4 }, { text: 'Five', id: 5 }];
+            this.cdr.detectChanges();
+        }, 1000);
+    }
+}