Merge pull request #10718 from IgniteUI/izhostov/fix-tab-scroll-13.0.x

fix(tabs): fix scrolling issue

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -280,12 +280,12 @@
     %tabs-header-content {
         flex: 1 1 auto;
         overflow: hidden;
+        scroll-behavior: smooth;
     }
 
     %tabs-header-wrapper {
         position: relative;
         flex-grow: 1;
-        transition: transform .2s $tabs-animation-function;
 
         @if $bootstrap-theme or $indigo-theme {
             &::after {

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

@@ -96,7 +96,7 @@ export class IgxTabHeaderComponent extends IgxTabHeaderDirective implements Afte
         }
 
         if (!unsupportedKey) {
-            itemsArray[newIndex].headerComponent.nativeElement.focus();
+            itemsArray[newIndex].headerComponent.nativeElement.focus({preventScroll:true});
             if (this.tab.panelComponent) {
                 this.tabs.selectedIndex = newIndex;
             }

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

@@ -231,16 +231,19 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit,
 
     private scroll(scrollRight: boolean): void {
         const tabsArray = this.items.toArray();
-        for (const tab of tabsArray) {
+
+        for (let index = 0; index < tabsArray.length; index++) {
+            const tab = tabsArray[index];
             const element = tab.headerComponent.nativeElement;
+
             if (scrollRight) {
                 if (element.offsetWidth + element.offsetLeft > this.viewPort.nativeElement.offsetWidth + this.offset) {
                     this.scrollElement(element, scrollRight);
                     break;
                 }
             } else {
-                if (element.offsetWidth + element.offsetLeft >= this.offset) {
-                    this.scrollElement(element, scrollRight);
+                if (element.offsetLeft >= this.offset) {
+                    this.scrollElement(tabsArray[index - 1].headerComponent.nativeElement, scrollRight);
                     break;
                 }
             }
@@ -251,7 +254,7 @@ export class IgxTabsComponent extends IgxTabsDirective implements AfterViewInit,
         const viewPortWidth = this.viewPort.nativeElement.offsetWidth;
 
         this.offset = (scrollRight) ? element.offsetWidth + element.offsetLeft - viewPortWidth : element.offsetLeft;
-        this.itemsWrapper.nativeElement.style.transform = `translate(${-this.offset}px)`;
+        this.viewPort.nativeElement.scrollLeft = this.offset;
         this.updateScrollButtons();
     }