fix(module:modal): integrate with tabs and auto-size

close NG-ZORRO#2286, close NG-ZORRO#2713

components/input/demo/autosize-textarea.md

@@ -7,11 +7,9 @@ title:
 
 ## zh-CN
 
-`nzAutosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `nzAutosize` 可以设定为一个对象，指定最小行数和最大行数。注意：`nzAutosize` 需要配合 `ngModel` 或者 `ReactiveForm` 使用
+`nzAutosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `nzAutosize` 可以设定为一个对象，指定最小行数和最大行数。
 
 ## en-US
 
 `nzAutosize` prop for a `textarea` type of `nz-input` makes the height to automatically adjust based on the content.
 An options object can be provided to `nzAutosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
-Note: `nzAutosize` must with `ngModel` or `ReactiveForm`.
-

components/input/nz-autoresize.directive.ts

@@ -2,14 +2,12 @@ import { Platform } from '@angular/cdk/platform';
 import {
   AfterViewInit,
   Directive,
+  DoCheck,
   ElementRef,
   Input,
   NgZone,
-  OnDestroy,
-  Optional,
-  Self
+  OnDestroy
 } from '@angular/core';
-import { NgControl } from '@angular/forms';
 import { fromEvent, Subject } from 'rxjs';
 import { auditTime, takeUntil } from 'rxjs/operators';
 
@@ -27,10 +25,11 @@ export function isAutoSizeType(value: string | boolean | AutoSizeType): value is
   host    : {
     // Textarea elements that have the directive applied should have a single row by default.
     // Browsers normally show two rows by default and therefore this limits the minRows binding.
-    rows: '1'
+    'rows'   : '1',
+    '(input)': 'noopInputHandler()'
   }
 })
-export class NzAutoResizeDirective implements AfterViewInit, OnDestroy {
+export class NzAutoResizeDirective implements AfterViewInit, OnDestroy, DoCheck {
   private _autosize: boolean | AutoSizeType = false;
   private el: HTMLTextAreaElement | HTMLInputElement = this.elementRef.nativeElement;
   private cachedLineHeight: number;
@@ -74,7 +73,6 @@ export class NzAutoResizeDirective implements AfterViewInit, OnDestroy {
     if (!force && this.minRows === this.previousMinRows && value === this.previousValue) {
       return;
     }
-
     const placeholderText = textarea.placeholder;
 
     // Reset the textarea height to auto in order to shrink back to its default size.
@@ -114,7 +112,7 @@ export class NzAutoResizeDirective implements AfterViewInit, OnDestroy {
   }
 
   private cacheTextareaLineHeight(): void {
-    if (this.cachedLineHeight) {
+    if (this.cachedLineHeight || !this.el.parentNode) {
       return;
     }
 
@@ -167,32 +165,34 @@ export class NzAutoResizeDirective implements AfterViewInit, OnDestroy {
     }
   }
 
-  constructor(
-    private elementRef: ElementRef,
-    private ngZone: NgZone,
-    @Optional() @Self() public ngControl: NgControl,
-    private platform: Platform
-  ) {
+  noopInputHandler(): void {
+    // no-op handler that ensures we're running change detection on input events.
+  }
+
+  constructor(private elementRef: ElementRef,
+              private ngZone: NgZone,
+              private platform: Platform) {
   }
 
   ngAfterViewInit(): void {
     if (this.nzAutosize && this.platform.isBrowser) {
-      if (this.ngControl) {
-        this.resizeToFitContent();
-        this.ngZone.runOutsideAngular(() => {
-          fromEvent(window, 'resize')
-          .pipe(auditTime(16), takeUntil(this.destroy$))
-          .subscribe(() => this.resizeToFitContent(true));
-        });
-        this.ngControl.control!.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => this.resizeToFitContent());
-      } else {
-        console.warn('nzAutosize must work with ngModel or ReactiveForm');
-      }
+      this.resizeToFitContent();
+      this.ngZone.runOutsideAngular(() => {
+        fromEvent(window, 'resize')
+        .pipe(auditTime(16), takeUntil(this.destroy$))
+        .subscribe(() => this.resizeToFitContent(true));
+      });
     }
   }
 
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
   }
+
+  ngDoCheck(): void {
+    if (this.nzAutosize && this.platform.isBrowser) {
+      this.resizeToFitContent();
+    }
+  }
 }

components/modal/nz-modal.component.html

@@ -12,7 +12,7 @@
     (click)="onClickMask($event)"
     class="ant-modal-wrap {{ nzWrapClassName }}"
     [style.zIndex]="nzZIndex"
-    [style.display]="hidden ? 'none' : ''"
+    [style.visibility]="hidden ? 'hidden' : null"
     tabindex="-1"
     role="dialog"
   >
@@ -30,13 +30,12 @@
             <i nz-icon type="close" class="ant-modal-close-icon"></i>
           </span>
         </button>
-        <ng-container [ngSwitch]="true">
+        <ng-container [ngSwitch]="!hidden">
           <ng-container *ngSwitchCase="isModalType('default')" [ngTemplateOutlet]="tplContentDefault"></ng-container>
           <ng-container *ngSwitchCase="isModalType('confirm')" [ngTemplateOutlet]="tplContentConfirm"></ng-container>
         </ng-container>
       </div>
     </div>
-    <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;">sentinel</div>
   </div>
 </div>
 

components/modal/nz-modal.spec.ts

@@ -785,11 +785,11 @@ export class ModalByServiceComponent {
 // -------------------------------------------
 
 function expectModalHidden(modalElement: HTMLElement, hidden: boolean): void {
-  const display = (modalElement.querySelector('.ant-modal-wrap') as HTMLElement).style.display;
+  const display = (modalElement.querySelector('.ant-modal-wrap') as HTMLElement).style.visibility;
   if (hidden) {
-    expect(display).toBe('none');
+    expect(display).toBe('hidden');
   } else {
-    expect(display).not.toBe('none');
+    expect(display).not.toBe('hidden');
   }
   expect(modalElement.querySelector('.ant-modal-mask')!.classList.contains('ant-modal-mask-hidden')).toBe(hidden);
 }