fix(module:tabs): prevent focus cause scroll offset (NG-ZORRO#1845)

close NG-ZORRO#1821
wenqi73 · Aug 27, 2018 · cf71da9 · cf71da9
1 parent 0065c7b
commit cf71da9
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/components/tabs/nz-tabs.spec.ts b/components/tabs/nz-tabs.spec.ts
@@ -1,6 +1,7 @@
 import { Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { fakeAsync, tick, TestBed } from '@angular/core/testing';
+import { fakeAsync, flush, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { dispatchFakeEvent } from '../core/testing';
 
 import { NzTabsModule } from './nz-tabs.module';
 import { NzTabSetComponent } from './nz-tabset.component';
@@ -448,6 +449,17 @@ describe('tabs', () => {
       expect(testComponent.select02).toHaveBeenCalledTimes(0);
       expect(testComponent.deselect02).toHaveBeenCalledTimes(0);
     }));
+    it('should prevent focus scroll', fakeAsync(() => {
+      fixture.detectChanges();
+      expect(tabs.nativeElement.scrollLeft).toBe(0);
+      const input: HTMLInputElement = tabs.nativeElement.querySelector('input');
+      input.focus();
+      expect(tabs.nativeElement.scrollLeft > 0).toBe(true);
+      dispatchFakeEvent(tabs.nativeElement, 'scroll');
+      flush();
+      fixture.detectChanges();
+      expect(tabs.nativeElement.scrollLeft).toBe(0);
+    }));
   });
 });
 
@@ -484,7 +496,7 @@ describe('tabs', () => {
           (nzDeselect)="deselect01()"
           (nzSelect)="select01()"
           (nzClick)="click01()"
-          [nzDisabled]="disabled">Content 2<!----></nz-tab>
+          [nzDisabled]="disabled">Content 2<!----><input></nz-tab>
         <nz-tab
           nzTitle="add"
           *ngIf="add"

diff --git a/components/tabs/nz-tabset.component.ts b/components/tabs/nz-tabset.component.ts
@@ -1,13 +1,16 @@
 /** get some code from https://github.com/angular/material2 */
 
+import { DOCUMENT } from '@angular/common';
 import {
   AfterContentChecked,
   AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   OnInit,
+  Optional,
   Output,
   Renderer2,
   TemplateRef,
@@ -42,6 +45,9 @@ export type NzTabType = 'line' | 'card';
   preserveWhitespaces: false,
   providers          : [ NzUpdateHostClassService ],
   templateUrl        : './nz-tabset.component.html',
+  host               : {
+    '(scroll)': 'onScroll($event)'
+  },
   styles             : [ `
     :host {
       display: block;
@@ -227,7 +233,20 @@ export class NzTabSetComponent implements AfterContentChecked, OnInit, AfterView
     this.listOfNzTabComponent.splice(this.listOfNzTabComponent.indexOf(value), 1);
   }
 
-  constructor(private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private elementRef: ElementRef) {
+  // From https://github.com/react-component/tabs/blob/master/src/Tabs.js
+  // Prevent focus to make the Tabs scroll offset
+  onScroll($event: Event): void {
+    const target: Element = $event.target as Element;
+    if (target.scrollLeft > 0) {
+      target.scrollLeft = 0;
+      if (this.document && this.document.activeElement) {
+        (this.document.activeElement as HTMLElement).blur();
+      }
+    }
+  }
+
+  // tslint:disable-next-line:no-any
+  constructor(private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private elementRef: ElementRef, @Optional() @Inject(DOCUMENT) private document: any) {
     this.el = this.elementRef.nativeElement;
   }