Merge pull request #14548 from IgniteUI/ganastasov/fix-14539-17.2.x

fix(combo): resolve error in dropdown component by setting id - 17.2.x

Author: kdinev

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

@@ -180,7 +180,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         if (selection) {
             this.selectionService.set(this._id, selection);
         }
-        if (this.dropdown.open) {
+        if (this.dropdown?.open) {
             this.dropdown.close();
         }
         if (this.inputGroup?.isFocused) {

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

@@ -1153,6 +1153,22 @@ describe('igxCombo', () => {
                 caseSensitiveIcon = fixture.debugElement.query(By.css('igx-icon[name=\'case-sensitive\']'));
                 expect(caseSensitiveIcon).toBeNull();
             });
+            it('should render the combo component with the id set and not throw an error', () => {
+                fixture = TestBed.createComponent(ComboWithIdComponent);
+                fixture.detectChanges();
+
+                combo = fixture.componentInstance.combo;
+                fixture.detectChanges();
+
+                expect(combo).toBeTruthy();
+                expect(combo.id).toEqual("id1");
+                fixture.detectChanges();
+
+                const errorSpy = spyOn(console, 'error');
+                fixture.detectChanges();
+
+                expect(errorSpy).not.toHaveBeenCalled();
+            });
         });
         describe('Positioning tests: ', () => {
             let containerElement: any;
@@ -3875,3 +3891,32 @@ export class ComboArrayTypeValueKeyComponent {
         ];
     }
 }
+
+@Component({
+    template: `
+        <igx-combo id="id1" [data]="items" valueKey="value" displayKey="item"></igx-combo>`,
+    standalone: true,
+    imports: [IgxComboComponent]
+})
+export class ComboWithIdComponent {
+    @ViewChild(IgxComboComponent, { read: IgxComboComponent, static: true })
+    public combo: IgxComboComponent;
+    public items: any[] = [];
+
+    constructor() {
+        this.items = [
+            {
+                item: "Item1",
+                value: "Option1"
+            },
+            {
+                item: "Item2",
+                value: "Option2"
+            },
+            {
+                item: "Item3",
+                value: "Option3",
+            }
+        ];
+    }
+}