feat(tabs): fixing selection indicator visibility #4297

Author: rmkrmk

projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

@@ -100,6 +100,7 @@ export class IgxTabItemComponent implements IgxTabItemBase {
     @HostListener('window:resize', ['$event'])
     public onResize(event) {
         if (this.isSelected) {
+            this._tabs.selectedIndicator.nativeElement.style.visibility = 'visible';
             this._tabs.selectedIndicator.nativeElement.style.width = `${this.nativeTabItem.nativeElement.offsetWidth}px`;
             this._tabs.selectedIndicator.nativeElement.style.transform = `translate(${this.nativeTabItem.nativeElement.offsetLeft}px)`;
         }
@@ -235,6 +236,7 @@ export class IgxTabItemComponent implements IgxTabItemBase {
     }
 
     private transformIndicatorAnimation(element: HTMLElement): void {
+        this._tabs.selectedIndicator.nativeElement.style.visibility = `visible`;
         this._tabs.selectedIndicator.nativeElement.style.width = `${element.offsetWidth}px`;
         this._tabs.selectedIndicator.nativeElement.style.transform = `translate(${element.offsetLeft}px)`;
     }

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

@@ -207,7 +207,7 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
     public offset = 0;
 
     private _groupChanges$: Subscription;
-    private _selectedIndex = 0;
+    private _selectedIndex = -1;
 
     /**
      * @hidden
@@ -331,13 +331,16 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
 
     private setSelectedGroup(): void {
         requestAnimationFrame(() => {
-            if (this.selectedIndex <= 0 || this.selectedIndex >= this.groups.length) {
-                // if nothing is selected - select the first tabs group
-                if (!this.hasContentTabs) {
-                    this.selectGroupByIndex(0);
+            if (this.hasContentTabs) {
+                if (this.selectedIndex < 0 || this.selectedIndex >= this.contentTabs.length) {
+                    this.selectedIndicator.nativeElement.style.visibility = 'hidden';
                 }
             } else {
-                this.selectGroupByIndex(this.selectedIndex);
+                if (this.selectedIndex <= 0 || this.selectedIndex >= this.groups.length) {
+                    this.selectGroupByIndex(0);
+                } else {
+                    this.selectGroupByIndex(this.selectedIndex);
+                }
             }
         });
     }