Merge pull request #14585 from IgniteUI/ganastasov/fix-14579-17.2.x

fix(drop-down): ensure id attribute is set correctly when using bracket syntax - 17.2.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts

@@ -71,6 +71,7 @@ export abstract class IgxDropDownBaseDirective extends DisplayDensityBase implem
      * <igx-drop-down [id]='newDropDownId'></igx-drop-down>
      * ```
      */
+    @HostBinding('attr.id')
     @Input()
     public get id(): string {
         return this._id;

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

@@ -99,7 +99,8 @@ describe('igxSelect', () => {
                 IgxSelectReactiveFormComponent,
                 IgxSelectTemplateFormComponent,
                 IgxSelectHeaderFooterComponent,
-                IgxSelectCDRComponent
+                IgxSelectCDRComponent,
+                IgxSelectWithIdComponent
             ]
         }).compileComponents();
     }));
@@ -532,6 +533,21 @@ describe('igxSelect', () => {
             expect(dummyInput).toEqual(document.activeElement);
             expect(select.collapsed).toBeFalsy();
         }));
+        
+        it('should set the id attribute when using property binding', () => {
+            fixture = TestBed.createComponent(IgxSelectWithIdComponent);
+            fixture.detectChanges();
+
+            select = fixture.componentInstance.select;
+            fixture.detectChanges();
+
+            const selectElement = fixture.debugElement.query(By.css('igx-select')).nativeElement;
+            fixture.detectChanges();
+
+            expect(select).toBeTruthy();
+            expect(select.id).toEqual("id1");
+            expect(selectElement.getAttribute('id')).toBe('id1');
+        });
     });
 
     describe('Form tests: ', () => {
@@ -3107,3 +3123,21 @@ class IgxSelectCDRComponent {
         { field: 'ContactName', type: 'string' }
     ];
 }
+
+@Component({
+    template: `
+        <igx-select [id]="'id1'">
+            <igx-select-item *ngFor="let item of items" [value]="item">
+                {{item}}
+            </igx-select-item>
+        </igx-select>
+    `,
+    standalone: true,
+    imports: [NgIf, IgxSelectComponent, IgxSelectItemComponent, IgxLabelDirective, NgFor]
+})
+class IgxSelectWithIdComponent {
+    @ViewChild(IgxSelectComponent, { read: IgxSelectComponent, static: true })
+    public select: IgxSelectComponent;
+
+    public items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
+}