feat(module:cascader): reposition cascader when column opens

close NG-ZORRO#2181, NG-ZORRO#2809
wzhudev · Jan 24, 2019 · e409863 · e409863
1 parent a2000fa
commit e409863
Showing 1 changed file with 47 additions and 12 deletions.
diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
@@ -1,5 +1,5 @@
 import { BACKSPACE, DOWN_ARROW, ENTER, ESCAPE, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
-import { ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, ConnectedOverlayPositionChange, ConnectionPositionPair } from '@angular/cdk/overlay';
 import {
   forwardRef,
   ChangeDetectionStrategy,
@@ -23,7 +23,14 @@ import { EXPANDED_DROPDOWN_POSITIONS } from '../core/overlay/overlay-position-ma
 import { arrayEquals, toArray } from '../core/util/array';
 import { InputBoolean } from '../core/util/convert';
 
-import { CascaderOption, CascaderSearchOption, NzCascaderExpandTrigger, NzCascaderSize, NzCascaderTriggerType, NzShowSearchOptions } from './types';
+import {
+  CascaderOption,
+  CascaderSearchOption,
+  NzCascaderExpandTrigger,
+  NzCascaderSize,
+  NzCascaderTriggerType,
+  NzShowSearchOptions
+} from './types';
 
 const defaultDisplayRender = label => label.join(' / ');
 
@@ -66,6 +73,7 @@ const defaultDisplayRender = label => label.join(' / ');
 export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
   @ViewChild('input') input: ElementRef;
   @ViewChild('menu') menu: ElementRef;
+  @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay;
 
   @Input() @InputBoolean() nzShowInput = true;
   @Input() @InputBoolean() nzShowArrow = true;
@@ -93,7 +101,10 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
   @Input() nzLoadData: (node: CascaderOption, index?: number) => PromiseLike<any>;
 
   @Input()
-  get nzOptions(): CascaderOption[] { return this.columns[ 0 ]; }
+  get nzOptions(): CascaderOption[] {
+    return this.columns[ 0 ];
+  }
+
   set nzOptions(options: CascaderOption[] | null) {
     this.columnsSnapshot = this.columns = options && options.length ? [ options ] : [];
     if (!this.isSearching) {
@@ -139,18 +150,22 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
     this._inputValue = inputValue;
     this.toggleSearchMode();
   }
-  get inputValue(): string { return this._inputValue; }
+
+  get inputValue(): string {
+    return this._inputValue;
+  }
+
   private _inputValue = '';
 
   get menuCls(): ClassMap {
     return {
-      [ `${this.nzMenuClassName}` ]: !!this.nzMenuClassName
+      [ `${ this.nzMenuClassName }` ]: !!this.nzMenuClassName
     };
   }
 
   get menuColumnCls(): ClassMap {
     return {
-      [ `${this.nzColumnClassName}` ]: !!this.nzColumnClassName
+      [ `${ this.nzColumnClassName }` ]: !!this.nzColumnClassName
     };
   }
 
@@ -228,8 +243,8 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
     let option = this.findOption(value, index);
     if (!option) {
       option = typeof value === 'object' ? value : {
-        [ `${this.nzValueProperty}` ]: value,
-        [ `${this.nzLabelProperty}` ]: value
+        [ `${ this.nzValueProperty }` ]: value,
+        [ `${ this.nzLabelProperty }` ]: value
       };
     }
     this.setOptionActivated(option, index, false, false);
@@ -293,6 +308,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
     }
 
     this.cdr.detectChanges();
+    this.reposition();
   }
 
   private loadChildrenAsync(option: CascaderOption, columnIndex: number, success?: () => void, failure?: () => void): void {
@@ -305,6 +321,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
           option.children.forEach(child => child.parent = columnIndex < 0 ? undefined : option);
           this.setColumnData(option.children, columnIndex + 1);
           this.cdr.detectChanges();
+          this.reposition();
         }
         if (success) {
           success();
@@ -624,7 +641,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
 
       if (this.input) {
         const width = this.input.nativeElement.offsetWidth;
-        this.dropdownWidthStyle = `${width}px`;
+        this.dropdownWidthStyle = `${ width }px`;
       }
     }
 
@@ -667,9 +684,15 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
       const disabled = forceDisabled || node.disabled;
       path.push(node);
       node.children.forEach((sNode) => {
-        if (!sNode.parent) { sNode.parent = node; } // Build parent reference when doing searching
-        if (!sNode.isLeaf) { loopParent(sNode, disabled); }
-        if (sNode.isLeaf || !sNode.children || !sNode.children.length) { loopChild(sNode, disabled); }
+        if (!sNode.parent) {
+          sNode.parent = node;
+        } // Build parent reference when doing searching
+        if (!sNode.isLeaf) {
+          loopParent(sNode, disabled);
+        }
+        if (sNode.isLeaf || !sNode.children || !sNode.children.length) {
+          loopChild(sNode, disabled);
+        }
       });
       path.pop();
     };
@@ -819,4 +842,16 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
       this.cdr.detectChanges();
     }
   }
+
+  /**
+   * Reposition the cascader panel. When a menu opens, the cascader expanded
+   * and may exceed the browser boundary.
+   */
+  private reposition(): void {
+    if (this.overlay && this.overlay.overlayRef && this.menuVisible) {
+      Promise.resolve().then(() => {
+        this.overlay.overlayRef.updatePosition();
+      });
+    }
+  }
 }