test(module:tree-select): fix test

NG-ZORRO · May 26, 2018 · 44b40d2 · 44b40d2
1 parent 21dcb45
commit 44b40d2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -262,12 +262,11 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     this.selectionChangeSubscription = this.subscribeSelectionChange();
   }
 
-  @HostListener('click', [ '$event' ])
-  trigger($event: MouseEvent): void {
+  @HostListener('click')
+  trigger(): void {
     if (this.nzDisabled || (!this.nzDisabled && this.nzOpen)) {
       this.closeDropDown();
     } else {
-      $event.stopPropagation();
       this.openDropdown();
       if (this.nzShowSearch) {
         this.focusOnInput();
@@ -279,13 +278,15 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     if (!this.nzDisabled) {
       this.nzOpen = true;
       this.nzOpenChange.emit(this.nzOpen);
+      this.updateCdkConnectedOverlayStatus();
     }
   }
 
   closeDropDown(): void {
     this.onTouched();
     this.nzOpen = false;
     this.nzOpenChange.emit(this.nzOpen);
+    this.updateCdkConnectedOverlayStatus();
   }
 
   onKeyDownInput(e: KeyboardEvent): void {
@@ -342,22 +343,19 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   }
 
   attachOverlay(): void {
-    if (!this.overlayRef) {
-      this.portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
-      this.overlayRef = this.overlay.create(this.getOverlayConfig());
-    }
-    if (this.overlayRef && !this.overlayRef.hasAttached()) {
-      this.overlayRef.attach(this.portal);
-      this.overlayBackdropClickSubscription = this.subscribeOverlayBackdropClick();
-    }
+    this.portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
+    this.overlayRef = this.overlay.create(this.getOverlayConfig());
+    this.overlayRef.attach(this.portal);
+    this.overlayBackdropClickSubscription = this.subscribeOverlayBackdropClick();
   }
 
   getOverlayConfig(): OverlayConfig {
     const overlayWidth = this.treeSelect.nativeElement.getBoundingClientRect().width;
     return new OverlayConfig({
       positionStrategy                                          : this.getOverlayPosition(),
       scrollStrategy                                            : this.overlay.scrollStrategies.reposition(),
-      [ this.nzDropdownMatchSelectWidth ? 'width' : 'minWidth' ]: overlayWidth
+      [ this.nzDropdownMatchSelectWidth ? 'width' : 'minWidth' ]: overlayWidth,
+      hasBackdrop: true
     });
   }
 
@@ -372,15 +370,9 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   }
 
   subscribeOverlayBackdropClick(): Subscription {
-    return merge(
-      fromEvent(this.document, 'click'),
-      fromEvent(this.document, 'touchend')
-    )
-    .subscribe((event: MouseEvent | TouchEvent) => {
-      const clickTarget = event.target as HTMLElement;
-      if ((clickTarget !== this.element.nativeElement || clickTarget !== this.treeSelect.nativeElement) && this.nzOpen) {
-        this.closeDropDown();
-      }
+    return this.overlayRef.backdropClick()
+    .subscribe(() => {
+      this.closeDropDown();
     });
   }
 
@@ -430,9 +422,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   }
 
   updatePosition(): void {
-    if (this.overlayRef) {
-      this.overlayRef.updatePosition();
-    }
+    this.overlayRef.updatePosition();
   }
 
   updateInputWidth(): void {
@@ -467,6 +457,14 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     };
   }
 
+  updateCdkConnectedOverlayStatus(): void {
+    if (this.nzOpen) {
+      this.renderer.removeStyle(this.overlayRef.backdropElement, 'display');
+    } else {
+      this.renderer.setStyle(this.overlayRef.backdropElement, 'display', 'none');
+    }
+  }
+
   writeValue(value: string[] | string): void {
     if (value) {
       if (this.isMultiple && Array.isArray(value)) {
@@ -487,7 +485,10 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
 
   ngOnInit(): void {
     this.isDestroy = false;
-    Promise.resolve().then(() => this.updateDropDownClassMap());
+    Promise.resolve().then(() => {
+      this.updateDropDownClassMap();
+      this.updateCdkConnectedOverlayStatus();
+    });
   }
 
   ngOnDestroy(): void {

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -79,7 +79,7 @@ describe('tree-select component', () => {
       treeSelect.nativeElement.click();
       fixture.detectChanges();
       expect(treeSelectComponent.nzOpen).toBe(true);
-      dispatchFakeEvent(document, 'click');
+      dispatchFakeEvent(overlayContainerElement.querySelector('.cdk-overlay-backdrop'), 'click');
       fixture.detectChanges();
       tick();
       expect(treeSelectComponent.nzOpen).toBe(false);