chore(select): Address comments #7487

Author: IvayloG

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

@@ -5,7 +5,7 @@ import { FormsModule, FormGroup, FormBuilder, FormControl, Validators, ReactiveF
 import { By } from '@angular/platform-browser';
 import { IgxDropDownModule, IgxDropDownItemComponent } from '../drop-down/index';
 import { IgxIconModule } from '../icon/index';
-import { IgxInputGroupModule } from '../input-group/index';
+import { IgxInputGroupModule, IgxHintDirective } from '../input-group/index';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxSelectComponent } from './select.component';
 import { IgxSelectItemComponent } from './select-item.component';
@@ -17,8 +17,6 @@ import { IgxSelectModule } from './select.module';
 
 const CSS_CLASS_INPUT_GROUP = 'igx-input-group';
 const CSS_CLASS_INPUT = 'igx-input-group__input';
-const CSS_CLASS_INPUT_GROUP_HINT = 'igx-input-group__hint';
-const CSS_CLASS_HINT = 'igx-input-group__hint-item--start';
 const CSS_CLASS_TOGGLE_BUTTON = 'igx-icon';
 const CSS_CLASS_DROPDOWN_LIST_SCROLL = 'igx-drop-down__list-scroll';
 const CSS_CLASS_DROPDOWN_LIST = 'igx-drop-down__list';
@@ -2519,21 +2517,23 @@ describe('igxSelect', () => {
         }));
         it('should not open dropdown on hint container click',
             fakeAsync(() => {
-                 const hintContainer = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_HINT));
-                 expect(select.collapsed).toBeTruthy();
-                 hintContainer.nativeElement.click();
-                 tick();
-                 fixture.detectChanges();
-                 expect(select.collapsed).toBeTruthy();
+                const hint = fixture.debugElement.query(By.directive(IgxHintDirective));
+                const hintContainer: HTMLElement = hint.nativeElement.parentElement;
+
+                expect(select.collapsed).toBeTruthy();
+                hintContainer.click();
+                tick();
+                fixture.detectChanges();
+                expect(select.collapsed).toBeTruthy();
         }));
         it('should not open dropdown on hint element click',
             fakeAsync(() => {
-                 const hint = fixture.debugElement.query(By.css('.' + CSS_CLASS_HINT));
-                 expect(select.collapsed).toBeTruthy();
-                 hint.nativeElement.click();
-                 tick();
-                 fixture.detectChanges();
-                 expect(select.collapsed).toBeTruthy();
+                const hint = fixture.debugElement.query(By.directive(IgxHintDirective));
+                expect(select.collapsed).toBeTruthy();
+                hint.nativeElement.click();
+                tick();
+                fixture.detectChanges();
+                expect(select.collapsed).toBeTruthy();
         }));
     });
 });

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

@@ -23,6 +23,7 @@ import { IgxSelectBase } from './select.common';
 import { EditorProvider } from '../core/edit-provider';
 import { IgxSelectionAPIService } from '../core/selection';
 import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
+import { IgxHintDirective } from '../directives/hint/hint.directive';
 
 /** @hidden @internal */
 @Directive({
@@ -92,6 +93,9 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
     /** @hidden @internal */
     @ViewChild('input', { read: IgxInputDirective, static: true }) public input: IgxInputDirective;
 
+    /** @hidden @internal */
+    @ContentChild(IgxHintDirective, { read: ElementRef }) hintElement: ElementRef;
+
     /** @hidden @internal */
     @ContentChildren(forwardRef(() => IgxSelectItemComponent), { descendants: true })
     public children: QueryList<IgxSelectItemComponent>;
@@ -342,11 +346,13 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
     }
 
     public inputGroupClick(event: MouseEvent, overlaySettings?: OverlaySettings) {
-        const targetClass = (event.target as HTMLElement).className;
-        if (!targetClass.includes('igx-input-group__hint')) {
-            this.toggle(Object.assign({}, this._overlayDefaults, this.overlaySettings, overlaySettings));
+        const targetElement = event.target as HTMLElement;
+
+        if (this.hintElement && targetElement.contains(this.hintElement.nativeElement)) {
+            return;
         }
-    }
+        this.toggle(Object.assign({}, this._overlayDefaults, this.overlaySettings, overlaySettings));
+}
 
     /** @hidden @internal */
     ngAfterContentInit() {