feat:(module:auto-complete): support active option will scrollable to…

… visible area (#1533) close #1480
NG-ZORRO · Jun 4, 2018 · fd3ab02 · fd3ab02
1 parent 6f77e5e
commit fd3ab02
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 22 deletions.
diff --git a/components/auto-complete/nz-autocomplete-option.component.ts b/components/auto-complete/nz-autocomplete-option.component.ts
@@ -1,7 +1,7 @@
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, EventEmitter,
+  Component, ElementRef, EventEmitter,
   Input, Output
 } from '@angular/core';
 
@@ -52,7 +52,7 @@ export class NzAutocompleteOptionComponent {
 
   @Output() selectionChange = new EventEmitter<NzOptionSelectionChange>();
 
-  constructor(private changeDetectorRef: ChangeDetectorRef) {
+  constructor(private changeDetectorRef: ChangeDetectorRef, private element: ElementRef) {
   }
 
   /** 选择 */
@@ -90,6 +90,14 @@ export class NzAutocompleteOptionComponent {
     }
   }
 
+  scrollIntoViewIfNeeded(): void {
+    /* tslint:disable-next-line:no-string-literal */
+    if (this.element.nativeElement && this.element.nativeElement['scrollIntoViewIfNeeded']) {
+      /* tslint:disable-next-line:no-string-literal */
+      setTimeout(() =>  this.element.nativeElement[ 'scrollIntoViewIfNeeded' ](false), 150);
+    }
+  }
+
   private emitSelectionChangeEvent(isUserInput: boolean = false): void {
     this.selectionChange.emit(new NzOptionSelectionChange(this, isUserInput));
   }

diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts
@@ -185,7 +185,9 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     this.nzAutocomplete.isOpen = this.panelOpen = true;
     this.nzAutocomplete.setVisibility();
     this.resetActiveItem();
-
+    if (this.activeOption) {
+      this.activeOption.scrollIntoViewIfNeeded();
+    }
   }
 
   private destroyPanel(): void {
@@ -256,6 +258,9 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       } else {
         this.nzAutocomplete.setNextItemActive();
       }
+      if (this.activeOption) {
+        this.activeOption.scrollIntoViewIfNeeded();
+      }
       this.doBackfill();
     }
   }

diff --git a/components/auto-complete/nz-autocomplete.spec.ts b/components/auto-complete/nz-autocomplete.spec.ts
@@ -216,12 +216,12 @@ describe('auto-complete', () => {
     it('should hide the panel when the options list is empty', fakeAsync(() => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
-
+      tick(150);
       const panel = overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement;
 
       typeInElement('B', input);
       fixture.detectChanges();
-      tick();
+      tick(150);
       fixture.detectChanges();
 
       expect(panel.classList)
@@ -230,7 +230,7 @@ describe('auto-complete', () => {
 
       typeInElement('x', input);
       fixture.detectChanges();
-      tick();
+      tick(150);
       fixture.detectChanges();
 
       expect(panel.classList)
@@ -292,7 +292,7 @@ describe('auto-complete', () => {
 
       componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
-      tick();
+      flush();
 
       expect(input.value)
       .toBe('Burns Bay Road');
@@ -310,7 +310,6 @@ describe('auto-complete', () => {
 
       componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
       fixture.detectChanges();
-      tick();
 
       expect(input.value)
       .toBe('Burns Bay Road');
@@ -328,8 +327,8 @@ describe('auto-complete', () => {
       componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
       componentInstance.trigger.handleKeydown(ENTER_EVENT);
       fixture.detectChanges();
+      flush();
 
-      tick(500);
       expect(input.value)
       .toBe('Downing Street');
 
@@ -365,9 +364,11 @@ describe('auto-complete', () => {
       fixture.detectChanges();
       flush();
 
+      fixture.detectChanges();
       const options =
         overlayContainerElement.querySelectorAll('nz-auto-option') as NodeListOf<HTMLElement>;
       options[1].click();
+      flush();
       fixture.detectChanges();
 
       expect(fixture.componentInstance.inputValue)
@@ -387,6 +388,7 @@ describe('auto-complete', () => {
         overlayContainerElement.querySelectorAll('nz-auto-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
+      flush();
 
       expect(input.value)
       .toBe('200');
@@ -398,8 +400,7 @@ describe('auto-complete', () => {
 
       typeInElement('200', input);
       fixture.detectChanges();
-      tick();
-      fixture.detectChanges();
+      flush();
 
       expect(fixture.componentInstance.inputValue).toBe(200);
     }));
@@ -412,7 +413,7 @@ describe('auto-complete', () => {
       .toBe(false);
       dispatchFakeEvent(input, 'blur');
       fixture.detectChanges();
-
+      flush();
       expect(fixture.componentInstance.inputControl.touched)
       .toBe(true);
     }));
@@ -488,9 +489,10 @@ describe('auto-complete', () => {
 
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
+      flush();
     }));
 
-    it('should fill the text field when an option is selected with ENTER', () => {
+    it('should fill the text field when an option is selected with ENTER', fakeAsync(() => {
       const componentInstance = fixture.componentInstance;
 
       expect(componentInstance.trigger.panelOpen)
@@ -500,17 +502,17 @@ describe('auto-complete', () => {
         componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
       });
       fixture.detectChanges();
-
+      flush();
       componentInstance.trigger.handleKeydown(ENTER_EVENT);
       fixture.detectChanges();
-
+      flush();
       expect(componentInstance.inputValue)
       .toContain('AntDesign four');
 
       expect(input.value)
       .toContain('AntDesign four');
 
-    });
+    }));
 
   });
 
@@ -544,6 +546,7 @@ describe('auto-complete', () => {
         overlayContainerElement.querySelectorAll('nz-auto-option') as NodeListOf<HTMLElement>;
       options[1].click();
       fixture.detectChanges();
+      flush();
 
       expect(componentOptions[0].selected)
       .toBe(false);
@@ -555,8 +558,7 @@ describe('auto-complete', () => {
       fixture.componentInstance.trigger.openPanel();
       fixture.detectChanges();
 
-      let options =
-        overlayContainerElement.querySelectorAll('nz-auto-option') as NodeListOf<HTMLElement>;
+      let options = overlayContainerElement.querySelectorAll('nz-auto-option') as NodeListOf<HTMLElement>;
       options[0].click();
       fixture.detectChanges();
       zone.simulateZoneExit();
@@ -573,7 +575,7 @@ describe('auto-complete', () => {
         overlayContainerElement.querySelectorAll('nz-auto-option') as NodeListOf<HTMLElement>;
       options[0].click();
       fixture.detectChanges();
-
+      flush();
       expect(componentOptions[0].selected)
       .toBe(true);
     }));
@@ -693,7 +695,6 @@ describe('auto-complete', () => {
         dispatchFakeEvent(input, 'focusin');
         typeInElement('A', input);
         fixture.detectChanges();
-        tick();
 
         expect(trigger.panelOpen).toBe(true);
 
@@ -704,19 +705,20 @@ describe('auto-complete', () => {
 
         dispatchFakeEvent(input, 'input');
         fixture.detectChanges();
-        tick();
+        flush();
 
         expect(trigger.panelOpen).toBe(false);
       }));
 
     it('should fill the text field when an option is selected with ENTER', fakeAsync(() => {
       const componentInstance = fixture.componentInstance;
       componentInstance.trigger.handleKeydown(DOWN_ARROW_EVENT);
-      flush();
       fixture.detectChanges();
+      flush();
 
       componentInstance.trigger.handleKeydown(ENTER_EVENT);
       fixture.detectChanges();
+      flush();
 
       expect(componentInstance.inputValue)
       .toContain('Downing Street');
@@ -731,6 +733,8 @@ describe('auto-complete', () => {
       flush();
 
       fixture.componentInstance.trigger.handleKeydown(ENTER_EVENT);
+      fixture.detectChanges();
+      flush();
 
       expect(ENTER_EVENT.defaultPrevented)
       .toBe(true);