fix(module:overlay): update overlay width when the host component's w…

…idth change (#780) close #779
NG-ZORRO · Dec 18, 2017 · 62fc733 · 62fc733
1 parent 196a12a
commit 62fc733
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 28 deletions.
diff --git a/src/components/datepicker/nz-datepicker.component.ts b/src/components/datepicker/nz-datepicker.component.ts
@@ -4,7 +4,6 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  HostBinding,
   Input,
   OnInit,
   ViewChild,
@@ -196,7 +195,6 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   _open = false;
   _mode = 'year';
   _dropDownPosition = 'bottom';
-  _triggerWidth = 0;
   _value: Date = null;
   _disabledDate;
   _today = new Date();
@@ -270,10 +268,6 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
     }
   }
 
-  _setTriggerWidth(): void {
-    this._triggerWidth = this.trigger.nativeElement.getBoundingClientRect().width;
-  }
-
   onPositionChange(position: ConnectedOverlayPositionChange): void {
     const _position = position.connectionPair.originY === 'bottom' ? 'top' : 'bottom';
     if (this._dropDownPosition !== _position) {
@@ -385,7 +379,6 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
     }
     this._mode = this.nzMode === 'day' ? 'year' : 'month';
     this._open = true;
-    this._setTriggerWidth();
   }
 
   _closeCalendar(): void {

diff --git a/src/components/dropdown/nz-dropdown-button.component.ts b/src/components/dropdown/nz-dropdown-button.component.ts
@@ -89,9 +89,7 @@ export class NzDropDownButtonComponent extends NzDropDownComponent implements On
       return;
     }
     if (visible) {
-      if (!this._triggerWidth) {
-        this._setTriggerWidth();
-      }
+      this._setTriggerWidth();
     }
     if (this.nzVisible !== visible) {
       this.nzVisible = visible;

diff --git a/src/components/dropdown/nz-dropdown.component.ts b/src/components/dropdown/nz-dropdown.component.ts
@@ -1,4 +1,4 @@
-import { ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -11,7 +11,8 @@ import {
   OnInit,
   Output,
   Renderer2,
-  ViewEncapsulation,
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
@@ -82,6 +83,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input() nzTrigger: 'click' | 'hover' = 'hover';
   @Output() _visibleChange = new Subject<boolean>();
   @Output() nzVisibleChange: EventEmitter<boolean> = new EventEmitter();
+  @ViewChild(CdkConnectedOverlay) _cdkOverlay: CdkConnectedOverlay;
 
   @Input()
   set nzClickHide(value: boolean) {
@@ -151,13 +153,17 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit {
 
   _setTriggerWidth(): void {
     this._triggerWidth = this._nzOrigin.elementRef.nativeElement.getBoundingClientRect().width;
+    /** should remove after https://github.com/angular/material2/pull/8765 merged **/
+    if (this._cdkOverlay && this._cdkOverlay.overlayRef) {
+      this._cdkOverlay.overlayRef.updateSize({
+        minWidth: this._triggerWidth
+      });
+    }
   }
 
   _onVisibleChange = (visible: boolean) => {
     if (visible) {
-      if (!this._triggerWidth) {
-        this._setTriggerWidth();
-      }
+      this._setTriggerWidth();
     }
     if (this.nzVisible !== visible) {
       this.nzVisible = visible;

diff --git a/src/components/select/nz-select.component.ts b/src/components/select/nz-select.component.ts
@@ -3,7 +3,7 @@
  * TODO: rebuild latter
  */
 import { DOWN_ARROW, ENTER, TAB } from '@angular/cdk/keycodes';
-import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
 import {
   forwardRef,
   AfterContentChecked,
@@ -12,7 +12,6 @@ import {
   ElementRef,
   EventEmitter,
   HostListener,
-  Inject,
   Input,
   OnInit,
   Output,
@@ -164,12 +163,12 @@ import { NzOptionPipe } from './nz-option.pipe';
 export class NzSelectComponent implements OnInit, AfterContentInit, AfterContentChecked, ControlValueAccessor {
   private _allowClear = false;
   private _disabled = false;
-  _isOpen = false;
   private _isTags = false;
   private _isMultiple = false;
   private _keepUnListOptions = false;
   private _showSearch = false;
   _el: HTMLElement;
+  _isOpen = false;
   _prefixCls = 'ant-select';
   _classList: string[] = [];
   _dropDownClassMap;
@@ -205,6 +204,7 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
   @Output() nzScrollToBottom: EventEmitter<boolean> = new EventEmitter();
   @Input() nzFilter = true;
   @Input() nzMaxMultiple = Infinity;
+  @ViewChild(CdkConnectedOverlay) _cdkOverlay: CdkConnectedOverlay;
 
   @Input()
   set nzAllowClear(value: boolean) {
@@ -315,9 +315,7 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
     }
     if (isOpen) {
       this.scrollToActive();
-      if (!this._triggerWidth) {
-        this._setTriggerWidth();
-      }
+      this._setTriggerWidth();
     }
     this._isOpen = isOpen;
     this.nzOpenChange.emit(this._isOpen);
@@ -694,7 +692,8 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
           // TODO: scrollIntoViewIfNeeded is not a standard API, why doing so?
           /* tslint:disable-next-line:no-any */
           (scrollPane as any).scrollIntoViewIfNeeded(false);
-        } catch (e) { }
+        } catch (e) {
+        }
       }
     });
   }
@@ -712,6 +711,12 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
 
   _setTriggerWidth(): void {
     this._triggerWidth = this._getTriggerRect().width;
+    /** should remove after after https://github.com/angular/material2/pull/8765 merged **/
+    if (this._cdkOverlay && this._cdkOverlay.overlayRef) {
+      this._cdkOverlay.overlayRef.updateSize({
+        width: this._triggerWidth
+      });
+    }
   }
 
   _getTriggerRect(): ClientRect {

diff --git a/src/components/time-picker/nz-timepicker.component.ts b/src/components/time-picker/nz-timepicker.component.ts
@@ -143,7 +143,6 @@ import { NzTimePickerInnerComponent } from './nz-timepicker-inner.component';
 export class NzTimePickerComponent extends NzTimePickerInnerComponent {
   private _timePickerDisabled = false;
   _dropDownPosition = 'bottom';
-  _triggerWidth = 0;
   _positions: ConnectionPositionPair[] = [ ...DEFAULT_DATEPICKER_POSITIONS ];
 
   @ViewChild('trigger') trigger;
@@ -158,10 +157,6 @@ export class NzTimePickerComponent extends NzTimePickerInnerComponent {
     return this._timePickerDisabled;
   }
 
-  _setTriggerWidth(): void {
-    this._triggerWidth = this.trigger.nativeElement.getBoundingClientRect().width;
-  }
-
   onPositionChange(position: ConnectedOverlayPositionChange): void {
     const _position = position.connectionPair.originY === 'bottom' ? 'top' : 'bottom';
     if (this._dropDownPosition !== _position) {
@@ -207,7 +202,6 @@ export class NzTimePickerComponent extends NzTimePickerInnerComponent {
 
   _openCalendar(): void {
     this._open = true;
-    this._setTriggerWidth();
     setTimeout(_ => {
       this._initPosition();
       this._inputTimeInstance.nativeElement.setSelectionRange(0, 8);