fix(module:tree-select): unable close when used OnPush (#2028)

close #2012
NG-ZORRO · Aug 31, 2018 · fb83354 · fb83354
1 parent 30bccd1
commit fb83354
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 5 deletions.
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -12,6 +12,7 @@ import { DOCUMENT } from '@angular/common';
 import {
   forwardRef,
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -78,7 +79,6 @@ import { NzTreeComponent } from '../tree/nz-tree.component';
 export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
 
   private nodes = [];
-  isInit = false;
   isComposing = false;
   isDestroy = true;
   inputValue = '';
@@ -119,7 +119,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   @Input()
   set nzNodes(value: NzTreeNode[]) {
     this.nodes = value;
-    if (this.isInit) {
+    if (this.treeRef) {
       setTimeout(() => this.updateSelectedNodes(), 0);
     }
   }
@@ -173,6 +173,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     @Optional() @Inject(DOCUMENT) private document: any, // tslint:disable-line:no-any
     @Optional() private element: ElementRef,
     private renderer: Renderer2,
+    private cdr: ChangeDetectorRef,
     private overlay: Overlay,
     private viewContainerRef: ViewContainerRef) {
   }
@@ -204,6 +205,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     this.nzOpen = false;
     this.nzOpenChange.emit(this.nzOpen);
     this.updateCdkConnectedOverlayStatus();
+    this.cdr.markForCheck();
   }
 
   onKeyDownInput(e: KeyboardEvent): void {
@@ -263,6 +265,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     this.portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
     this.overlayRef = this.overlay.create(this.getOverlayConfig());
     this.overlayRef.attach(this.portal);
+    this.cdr.detectChanges();
     this.overlayBackdropClickSubscription = this.subscribeOverlayBackdropClick();
   }
 
@@ -434,7 +437,6 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
 
   ngAfterViewInit(): void {
     this.attachOverlay();
-    this.isInit = true;
   }
 
   setDisabledState(isDisabled: boolean): void {

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -1,6 +1,6 @@
 import { BACKSPACE } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { Component, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
 import { async, fakeAsync, flush, inject, tick, TestBed } from '@angular/core/testing';
 import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -22,7 +22,7 @@ describe('tree-select component', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTreeSelectModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule ],
-      declarations: [ NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent, NzTestTreeSelectAsyncNodesComponent ]
+      declarations: [ NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent, NzTestTreeSelectAsyncNodesComponent, NzTestTreeSelectOnPushComponent ]
     });
     TestBed.compileComponents();
     inject([ OverlayContainer ], (oc: OverlayContainer) => {
@@ -35,6 +35,38 @@ describe('tree-select component', () => {
     overlayContainer.ngOnDestroy();
   }));
 
+  describe('OnPush', () => {
+    let fixture;
+    let testComponent: NzTestTreeSelectOnPushComponent;
+    let treeSelectComponent: NzTreeSelectComponent;
+    let treeSelect;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(NzTestTreeSelectOnPushComponent);
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+      treeSelect = fixture.debugElement.query(By.directive(NzTreeSelectComponent));
+      treeSelectComponent = treeSelect.componentInstance;
+      fixture.detectChanges();
+      flush();
+      tick(200);
+      fixture.detectChanges();
+    }));
+
+    it('should close when the outside clicks', fakeAsync(() => {
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      expect(treeSelectComponent.nzOpen).toBe(true);
+      tick(200);
+      expect((overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement).style.opacity).toBe('1');
+      dispatchFakeEvent(overlayContainerElement.querySelector('.cdk-overlay-backdrop'), 'click');
+      fixture.detectChanges();
+      tick();
+      expect(treeSelectComponent.nzOpen).toBe(false);
+      expect((overlayContainerElement.querySelector('.ant-select-dropdown') as HTMLElement).style.opacity).toBe('0');
+    }));
+  });
+
   describe('basic', () => {
     let fixture;
     let testComponent: NzTestTreeSelectBasicComponent;
@@ -668,3 +700,28 @@ export class NzTestTreeSelectAsyncNodesComponent {
     });
   }
 }
+
+@Component({
+  selector: 'nz-test-tree-select-on-push',
+  template: `
+    <nz-tree-select
+      [nzNodes]="nodes"
+      [(ngModel)]="value">
+    </nz-tree-select>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class NzTestTreeSelectOnPushComponent {
+  value: string = '1001';
+  nodes = [
+    new NzTreeNode({
+      title   : 'root1',
+      key     : '1001'
+    }),
+    new NzTreeNode({
+      title   : 'root2',
+      key     : '1002'
+    })
+  ];
+}