fix(input-group): theme CSS prop not retreived (#9505)

simeonoff · kdinev · rkaraivanov · web-flow · commit 5cf355934a5a · 2021-05-14T09:47:25.000+03:00
* fix(input-group): theme CSS prop not retrieved

Co-authored-by: Konstantin Dinev &lt;kdinev@mail.bw.edu&gt;
Co-authored-by: Radoslav Karaivanov &lt;rkaraivanov@infragistics.com&gt;
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -34,7 +34,7 @@
 <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
     [width]="itemsWidth || '100%'" (onOpening)="handleOpening($event)" (onClosing)="handleClosing($event)"
     (onOpened)="handleOpened()" (onClosed)="handleClosed()">
-    <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" class="igx-combo__search">
+    <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" theme="material" class="igx-combo__search">
         <input class="igx-combo-input" igxInput #searchInput name="searchInput" autocomplete="off" type="text"
             [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
             (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -803,12 +803,14 @@ describe('igxCombo', () => {
                 ]
             }).compileComponents();
         }));
-        beforeEach(() => {
+        beforeEach(fakeAsync(() => {
             fixture = TestBed.createComponent(IgxComboSampleComponent);
             fixture.detectChanges();
             combo = fixture.componentInstance.combo;
             input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
-        });
+            tick();
+            fixture.detectChanges();
+        }));
         it('should initialize the combo component properly', () => {
             const toggleButton = fixture.debugElement.query(By.css('.' + CSS_CLASS_TOGGLEBUTTON));
             expect(fixture.componentInstance).toBeDefined();
@@ -1127,12 +1129,14 @@ describe('igxCombo', () => {
                 ]
             }).compileComponents();
         }));
-        beforeEach(() => {
+        beforeEach(fakeAsync(() => {
             fixture = TestBed.createComponent(IgxComboInContainerTestComponent);
             fixture.detectChanges();
             combo = fixture.componentInstance.combo;
             containerElement = fixture.debugElement.query(By.css('.comboContainer')).nativeElement;
-        });
+            tick();
+            fixture.detectChanges();
+        }));
         it('should adjust combo width to the container element width when set to 100%', () => {
             const containerWidth = 500;
             const comboWrapper = fixture.debugElement.query(By.css(CSS_CLASS_COMBO)).nativeElement;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -242,6 +242,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const reset = filterUIRow.queryAll(By.css('button'))[0];
             const close = filterUIRow.queryAll(By.css('button'))[1];
             const input = filterUIRow.query(By.directive(IgxInputDirective));
+            tick();
 
             expect(grid.rowList.length).toEqual(8);
 
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.spec.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild, ElementRef, Inject } from '@angular/core';
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxInputGroupComponent, IgxInputGroupModule } from './input-group.component';
 import { DisplayDensityToken, DisplayDensity } from '../core/displayDensity';
@@ -41,58 +41,69 @@ describe('IgxInputGroup', () => {
             .compileComponents();
     }));
 
-    it('Initializes an input group.', () => {
+    it('Initializes an input group.', fakeAsync(() => {
         const fixture = TestBed.createComponent(InputGroupDisabledComponent);
         fixture.detectChanges();
 
         const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement;
         expect(inputGroupElement.classList.contains(INPUT_GROUP_CSS_CLASS)).toBe(true);
 
         const igxInputGroup = fixture.componentInstance.igxInputGroup;
+        tick();
+        fixture.detectChanges();
         // the default type should be line
         testInputGroupType('line', igxInputGroup, inputGroupElement);
-    });
+    }));
 
-    it('Initializes an input group with type box.', () => {
+    it('Initializes an input group with type box.', fakeAsync(() => {
         const fixture = TestBed.createComponent(InputGroupBoxComponent);
         fixture.detectChanges();
 
         const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement;
         expect(inputGroupElement.classList.contains(INPUT_GROUP_CSS_CLASS)).toBe(true);
 
         const igxInputGroup = fixture.componentInstance.igxInputGroup;
+        tick();
+        fixture.detectChanges();
         testInputGroupType('box', igxInputGroup, inputGroupElement);
-    });
+    }));
 
-    it('Initializes an input group with type border.', () => {
+    it('Initializes an input group with type border.', fakeAsync(() => {
         const fixture = TestBed.createComponent(InputGroupBorderComponent);
         fixture.detectChanges();
 
         const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement;
         expect(inputGroupElement.classList.contains(INPUT_GROUP_CSS_CLASS)).toBe(true);
 
         const igxInputGroup = fixture.componentInstance.igxInputGroup;
+        tick();
+        fixture.detectChanges();
         testInputGroupType('border', igxInputGroup, inputGroupElement);
-    });
+    }));
 
-    it('Initializes an input group with type search.', () => {
+    it('Initializes an input group with type search.', fakeAsync(() => {
         const fixture = TestBed.createComponent(InputGroupSearchComponent);
         fixture.detectChanges();
 
         const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement;
         expect(inputGroupElement.classList.contains(INPUT_GROUP_CSS_CLASS)).toBe(true);
 
         const igxInputGroup = fixture.componentInstance.igxInputGroup;
+        tick();
+        fixture.detectChanges();
         testInputGroupType('search', igxInputGroup, inputGroupElement);
-    });
+    }));
 
-    it('Should respect type Token and be able to change input group type programmatically.', () => {
+    it('Should respect type Token and be able to change input group type programmatically.', fakeAsync(() => {
         const fixture = TestBed.createComponent(InputGroupComponent);
         fixture.detectChanges();
 
         const inputGroupElement = fixture.debugElement.query(By.css('igx-input-group')).nativeElement;
         const igxInputGroup = fixture.componentInstance.igxInputGroup;
 
+        tick();
+        fixture.detectChanges();
+
         // a Token is passed and can be obtained
         expect(fixture.componentInstance.IGTOKEN).toBe('box');
 
@@ -120,7 +131,7 @@ describe('IgxInputGroup', () => {
         igxInputGroup.type = null;
         fixture.detectChanges();
         testInputGroupType('box', igxInputGroup, inputGroupElement);
-    });
+    }));
 
     it('disabled input should properly detect changes.', () => {
         const fixture = TestBed.createComponent(InputGroupDisabledComponent);
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -1,5 +1,6 @@
 import { CommonModule, DOCUMENT } from '@angular/common';
 import {
+    AfterViewInit,
     Component,
     ContentChild,
     ContentChildren,
@@ -11,8 +12,8 @@ import {
     QueryList,
     Inject,
     Optional,
-    AfterContentInit,
-    Renderer2,
+    OnDestroy,
+    ChangeDetectorRef,
 } from '@angular/core';
 import { IgxHintDirective } from '../directives/hint/hint.directive';
 import {
@@ -36,6 +37,7 @@ import { IInputResourceStrings } from '../core/i18n/input-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 
 import { mkenum, PlatformUtil } from '../core/utils';
+import { Subject, Subscription } from 'rxjs';
 
 const IgxInputGroupTheme = mkenum({
     Material: 'material',
@@ -56,7 +58,7 @@ export type IgxInputGroupTheme = (typeof IgxInputGroupTheme)[keyof typeof IgxInp
         { provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent },
     ],
 })
-export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInputGroupBase, AfterContentInit {
+export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInputGroupBase, AfterViewInit, OnDestroy {
     /**
      * Sets the resource strings.
      * By default it uses EN resources.
@@ -137,7 +139,9 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
 
     private _type: IgxInputGroupType = null;
     private _filled = false;
-    private _variant: IgxInputGroupTheme;
+    private _theme: IgxInputGroupTheme;
+    private _theme$ = new Subject();
+    private _subscription: Subscription;
     private _resourceStrings = CurrentResourceStrings.InputResStrings;
 
     /** @hidden */
@@ -214,13 +218,13 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      * }
      */
     @Input()
-    public set theme(variant: IgxInputGroupTheme) {
-        this._variant = variant;
+    public set theme(value: IgxInputGroupTheme) {
+        this._theme = value;
     }
 
     /**
      * Returns the theme of the input.
-     * The returned value is of tyep IgxInputGroupType.
+     * The returned value is of type IgxInputGroupType.
      * ```typescript
      * @ViewChild("MyInputGroup")
      * public inputGroup: IgxInputGroupComponent;
@@ -229,7 +233,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      * }
      */
     public get theme(): IgxInputGroupTheme {
-        return this._variant;
+        return this._theme;
     }
 
     constructor(
@@ -242,10 +246,15 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
         private _inputGroupType: IgxInputGroupType,
         @Inject(DOCUMENT)
         private document: any,
-        private renderer: Renderer2,
-        private platform: PlatformUtil
+        private platform: PlatformUtil,
+        private cdr: ChangeDetectorRef
     ) {
         super(_displayDensityOptions);
+
+        this._subscription = this._theme$.asObservable().subscribe(value => {
+            this._theme = value as IgxInputGroupTheme;
+            this.cdr.detectChanges();
+        });
     }
 
     /** @hidden */
@@ -273,19 +282,6 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
         event.stopPropagation();
     }
 
-    /** @hidden @internal */
-    public ngAfterContentInit() {
-        if (!this.theme) {
-            if(this.platform.isIE) {
-                this._variant = IgxInputGroupTheme.Material;
-            } else {
-                this._variant = this.document.defaultView
-                    .getComputedStyle(this.element.nativeElement)
-                    .getPropertyValue('--theme')
-                    .trim() as IgxInputGroupTheme;
-            }
-        }
-    }
     /**
      * Returns whether the `IgxInputGroupComponent` has hints.
      * ```typescript
@@ -313,7 +309,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
     public get hasBorder() {
         return (
             (this.type === 'line' || this.type === 'box') &&
-            this._variant === 'material'
+            this._theme === 'material'
         );
     }
 
@@ -328,7 +324,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      * ```
      */
     public get isTypeLine(): boolean {
-        return this.type === 'line' && this._variant === 'material';
+        return this.type === 'line' && this._theme === 'material';
     }
 
     /**
@@ -343,7 +339,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostBinding('class.igx-input-group--box')
     public get isTypeBox() {
-        return this.type === 'box' && this._variant === 'material';
+        return this.type === 'box' && this._theme === 'material';
     }
 
     /** @hidden @internal */
@@ -379,7 +375,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostBinding('class.igx-input-group--border')
     public get isTypeBorder() {
-        return this.type === 'border' && this._variant === 'material';
+        return this.type === 'border' && this._theme === 'material';
     }
 
     /**
@@ -394,7 +390,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostBinding('class.igx-input-group--fluent')
     public get isTypeFluent() {
-        return this._variant === 'fluent';
+        return this._theme === 'fluent';
     }
 
     /**
@@ -409,7 +405,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostBinding('class.igx-input-group--bootstrap')
     public get isTypeBootstrap() {
-        return this._variant === 'bootstrap';
+        return this._theme === 'bootstrap';
     }
 
     /**
@@ -424,7 +420,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostBinding('class.igx-input-group--indigo')
     public get isTypeIndigo() {
-        return this._variant === 'indigo-design';
+        return this._theme === 'indigo-design';
     }
 
     /**
@@ -451,6 +447,31 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
     public set filled(val) {
         this._filled = val;
     }
+
+    /** @hidden @internal */
+    public ngAfterViewInit() {
+        if (!this._theme) {
+            if(this.platform.isIE) {
+                Promise.resolve().then(() => {
+                    this._theme$.next(IgxInputGroupTheme.Material);
+                });
+            } else {
+                const cssProp = this.document.defaultView
+                    .getComputedStyle(this.element.nativeElement)
+                    .getPropertyValue('--theme')
+                    .trim();
+
+                Promise.resolve().then(() => {
+                    this._theme$.next(cssProp);
+                });
+            }
+        }
+    }
+
+    /** @hidden @internal */
+    public ngOnDestroy() {
+        this._subscription.unsubscribe();
+    }
 }
 
 /** @hidden */
diff --git a/src/app/dialog/dialog.sample.html b/src/app/dialog/dialog.sample.html
@@ -100,14 +100,14 @@ <h4 class="sample-title">Templated Dialog</h4>
             <igx-dialog-title>Title</igx-dialog-title>
 
             <div class="login-form">
-                <igx-input-group>
+                <igx-input-group theme="material" type="box">
                     <igx-prefix>
                         <igx-icon>person</igx-icon>
                     </igx-prefix>
                     <input type="text" igxInput />
                     <label igxLabel>Username</label>
                 </igx-input-group>
-                <igx-input-group>
+                <igx-input-group type="box">
                     <igx-prefix>
                         <igx-icon>lock</igx-icon>
                     </igx-prefix>
