fix(tabs): addressing suggestions #5471

Author: rmkrmk

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

@@ -80,6 +80,7 @@ export class IgxTabItemComponent extends IgxTabItemBase {
 
     private _nativeTabItem: ElementRef;
     private _changesCount = 0; // changes and updates accordingly applied to the tab.
+    private _isSelected = false;
     private _disabled = false;
 
     constructor(private _tabs: IgxTabsBase, private _element: ElementRef) {
@@ -263,6 +264,14 @@ export class IgxTabItemComponent extends IgxTabItemBase {
         return -1;
     }
 
+    /**
+     * @hidden
+     */
+    public setSelectedInternal(newValue: boolean) {
+        this._isSelected = newValue;
+        this.tabindex = newValue ? 0 : -1;
+    }
+
     private onKeyDown(isLeftArrow: boolean, index = null): void {
         const tabsArray = this._tabs.tabs.toArray();
         if (index === null) {

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

@@ -75,6 +75,7 @@ export class IgxTabsGroupComponent extends IgxTabsGroupBase implements AfterCont
     protected tabTemplate: IgxTabItemTemplateDirective;
 
     private _tabTemplate: TemplateRef<any>;
+    private _isSelected = false;
 
     constructor(private _tabs: IgxTabsBase, private _element: ElementRef) {
         super();
@@ -161,12 +162,6 @@ export class IgxTabsGroupComponent extends IgxTabsGroupBase implements AfterCont
     public ngAfterViewChecked() {
         this._element.nativeElement.setAttribute('aria-labelledby', `igx-tab-item-${this.index}`);
         this._element.nativeElement.setAttribute('id', `igx-tabs__group-${this.index}`);
-
-        if (this.isSelected) {
-            const tabItem = this.relatedTab.nativeTabItem.nativeElement;
-            this._tabs.transformContentAnimation(this.relatedTab, 0);
-            this._tabs.transformIndicatorAnimation(tabItem);
-        }
     }
 
     /**
@@ -179,12 +174,18 @@ export class IgxTabsGroupComponent extends IgxTabsGroupBase implements AfterCont
      *    this.tab.select();
      *}
      *```
-     * @param focusDelay A number representing the expected delay.
      */
     public select(): void {
         if (!this.disabled && !this.isSelected) {
             this._tabs.performSelectionChange(this.relatedTab);
         }
     }
 
+    /**
+     * @hidden
+     */
+    public setSelectedInternal(newValue: boolean) {
+        this._isSelected = newValue;
+    }
+
 }

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

@@ -23,14 +23,13 @@ export abstract class IgxTabsBase {
 /** @hidden */
 export abstract class IgxTabItemBase {
     nativeTabItem: ElementRef;
-    _isSelected = false;
-    tabindex;
-    select(focusDelay?: number): void {}
     get index(): number { return 0; }
+    select(): void {}
+    setSelectedInternal(newValue: boolean) {}
 }
 
 /** @hidden */
 export abstract class IgxTabsGroupBase {
-    _isSelected = false;
-    select(focusDelay?: number): void {}
+    select(): void {}
+    setSelectedInternal(newValue: boolean) {}
 }

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

@@ -370,31 +370,30 @@ export class IgxTabsComponent implements IgxTabsBase, AfterViewInit, OnDestroy {
         if (newTab) {
             this.performSelection(newTab);
         } else {
-            // if there is no new selected tab hide the visibility indicator
+            // if there is no new selected tab hide the selection indicator
             this.hideIndicator();
         }
     }
 
     private performDeselection(oldTab: IgxTabItemBase): void {
-        oldTab._isSelected = false;
+        oldTab.setSelectedInternal(false);
         const oldTabRelatedGroup = this.groups.toArray()[oldTab.index];
         if (oldTabRelatedGroup) {
-            oldTabRelatedGroup._isSelected = false;
+            oldTabRelatedGroup.setSelectedInternal(false);
         }
         this._selectedIndex = -1;
         this.onTabItemDeselected.emit({ tab: oldTab, group: oldTabRelatedGroup });
     }
 
     private performSelection(newTab: IgxTabItemBase): void {
-        newTab._isSelected = true;
-        newTab.tabindex = 0;
+        newTab.setSelectedInternal(true);
         this._selectedIndex = newTab.index;
 
         let newTabRelatedGroup = null;
         if (!this.hasContentTabs && this.groups) {
             newTabRelatedGroup = this.groups.toArray()[newTab.index];
             if (newTabRelatedGroup) {
-                newTabRelatedGroup._isSelected = true;
+                newTabRelatedGroup.setSelectedInternal(true);
             }
         }