feat(kit): Tabs update scroll position on active index change (#268)

taiga-family · Mar 8, 2021 · a753a5e · a753a5e
1 parent 6f89b82
commit a753a5e
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/projects/kit/components/tabs/tabs/tabs.component.ts b/projects/kit/components/tabs/tabs/tabs.component.ts
@@ -50,9 +50,11 @@ export class TuiTabsComponent implements AfterViewChecked {
     @tuiDefaultProp()
     underline = true;
 
-    @Input()
-    @tuiDefaultProp()
-    activeItemIndex = 0;
+    @Input('activeItemIndex')
+    set activeItemIndexSetter(index: number) {
+        this.activeItemIndex = index;
+        this.updateScrollPosition(this.tabs[index]);
+    }
 
     @Output()
     readonly activeItemIndexChange = new EventEmitter<number>();
@@ -66,6 +68,8 @@ export class TuiTabsComponent implements AfterViewChecked {
     @ContentChildren(forwardRef(() => TuiTabComponent))
     private readonly children: QueryList<unknown> = EMPTY_QUERY;
 
+    activeItemIndex = 0;
+
     constructor(
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
         @Inject(Renderer2) private readonly renderer: Renderer2,
@@ -122,8 +126,22 @@ export class TuiTabsComponent implements AfterViewChecked {
             return;
         }
 
-        this.activeItemIndex = index;
+        this.activeItemIndexSetter = index;
         this.activeItemIndexChange.emit(index);
+    }
+
+    @HostListener('keydown.arrowRight.prevent', ['$event.target', '1'])
+    @HostListener('keydown.arrowLeft.prevent', ['$event.target', '-1'])
+    onKeyDownArrow(current: HTMLElement, step: number) {
+        const {tabs} = this;
+
+        moveFocus(tabs.indexOf(current), tabs, step);
+    }
+
+    updateScrollPosition(element?: HTMLElement) {
+        if (!element) {
+            return;
+        }
 
         const {offsetLeft, offsetWidth} = element;
         const {nativeElement} = this.elementRef;
@@ -140,12 +158,4 @@ export class TuiTabsComponent implements AfterViewChecked {
                 offsetLeft + offsetWidth - nativeElement.offsetWidth;
         }
     }
-
-    @HostListener('keydown.arrowRight.prevent', ['$event.target', '1'])
-    @HostListener('keydown.arrowLeft.prevent', ['$event.target', '-1'])
-    onKeyDownArrow(current: HTMLElement, step: number) {
-        const {tabs} = this;
-
-        moveFocus(tabs.indexOf(current), tabs, step);
-    }
 }