Skip to content

Commit

Permalink
fix(module:tree-select): fix tree-select overlay's index problem NG-Z…
Browse files Browse the repository at this point in the history 
…ORRO#2730
  • Loading branch information
@100cm
100cm committed Jan 11, 2019
1 parent e74acfc commit 6ee20c7
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 65 deletions.
24 changes: 17 additions & 7 deletions components/tree-select/nz-tree-select.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
this.updateCdkConnectedOverlayStatus();
this.updatePosition();
this.updateDropDownClassMap();
this.updateOverlayIndex();
}
}

Expand Down Expand Up @@ -307,6 +308,15 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
});
}

updateOverlayIndex(): void {
// update overlay index position
const backdropElement = this.overlayRef.backdropElement;
const parentNode = this.renderer.parentNode(backdropElement);
const hostElement = this.overlayRef.hostElement;
this.renderer.appendChild(parentNode, backdropElement);
this.renderer.appendChild(parentNode, hostElement);
}

attachOverlay(): void {
this.portal = new TemplatePortal(this.dropdownTemplate, this.viewContainerRef);
this.overlayRef = this.overlay.create(this.getOverlayConfig());
Expand All @@ -331,18 +341,18 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' })
];
this.positionStrategy = this.overlay.position()
.flexibleConnectedTo(this.treeSelect)
.withPositions(positions)
.withFlexibleDimensions(false)
.withPush(false);
.flexibleConnectedTo(this.treeSelect)
.withPositions(positions)
.withFlexibleDimensions(false)
.withPush(false);
return this.positionStrategy;
}

subscribeOverlayBackdropClick(): Subscription {
return this.overlayRef.backdropClick()
.subscribe(() => {
this.closeDropDown();
});
.subscribe(() => {
this.closeDropDown();
});
}

subscribeSelectionChange(): Subscription {
Expand Down
133 changes: 75 additions & 58 deletions components/tree-select/nz-tree-select.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@ describe('tree-select component', () => {
let overlayContainerElement: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports : [ NzTreeSelectModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule ],
declarations: [ NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent ]
imports: [NzTreeSelectModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
declarations: [NzTestTreeSelectBasicComponent, NzTestTreeSelectCheckableComponent, NzTestTreeSelectFormComponent]
});
TestBed.compileComponents();
inject([ OverlayContainer ], (oc: OverlayContainer) => {
inject([OverlayContainer], (oc: OverlayContainer) => {
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
})();
}));
afterEach(inject([ OverlayContainer ], (currentOverlayContainer: OverlayContainer) => {
afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
currentOverlayContainer.ngOnDestroy();
overlayContainer.ngOnDestroy();
}));
Expand Down Expand Up @@ -118,6 +118,23 @@ describe('tree-select component', () => {
expect(treeSelectComponent.nzOpen).toBe(true);
expect(overlayPane.style.minWidth).toBe('250px');
}));
it('should dropdownMatchSelectWidth work', fakeAsync(() => {
testComponent.dropdownMatchSelectWidth = true;
fixture.detectChanges();
treeSelect.nativeElement.click();
fixture.detectChanges();
expect(treeSelectComponent.nzOpen).toBe(true);
const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
expect(overlayPane.style.width).toBe('250px');
treeSelectComponent.closeDropDown();
fixture.detectChanges();
testComponent.dropdownMatchSelectWidth = false;
fixture.detectChanges();
treeSelect.nativeElement.click();
fixture.detectChanges();
expect(treeSelectComponent.nzOpen).toBe(true);
expect(overlayPane.style.minWidth).toBe('250px');
}));
it('should clear value work', fakeAsync(() => {
testComponent.allowClear = true;
fixture.detectChanges();
Expand Down Expand Up @@ -158,7 +175,7 @@ describe('tree-select component', () => {
fixture.detectChanges();
expect(treeSelectComponent.nzOpen).toBe(true);
fixture.detectChanges();
const targetNode = overlayContainerElement.querySelectorAll('nz-tree-node')[ 2 ];
const targetNode = overlayContainerElement.querySelectorAll('nz-tree-node')[2];
dispatchMouseEvent(targetNode, 'click');
fixture.detectChanges();
flush();
Expand Down Expand Up @@ -272,7 +289,7 @@ describe('tree-select component', () => {

it('should set null value work', fakeAsync(() => {
fixture.detectChanges();
expect(testComponent.value[ 0 ]).toBe('1000122');
expect(testComponent.value[0]).toBe('1000122');
testComponent.setNull();
fixture.detectChanges();
tick();
Expand Down Expand Up @@ -310,7 +327,7 @@ describe('tree-select component', () => {
fixture.detectChanges();
expect(treeSelectComponent.nzOpen).toBe(true);
fixture.detectChanges();
const targetNode = overlayContainerElement.querySelectorAll('nz-tree-node')[ 2 ];
const targetNode = overlayContainerElement.querySelectorAll('nz-tree-node')[2];
dispatchMouseEvent(targetNode, 'click');
fixture.detectChanges();
flush();
Expand Down Expand Up @@ -412,7 +429,7 @@ describe('tree-select component', () => {
})
export class NzTestTreeSelectBasicComponent {
@ViewChild(NzTreeSelectComponent) nzSelectTreeComponent: NzTreeSelectComponent;
expandKeys = [ '1001', '10001' ];
expandKeys = ['1001', '10001'];
value = '10001';
size = 'default';
allowClear = false;
Expand All @@ -421,31 +438,31 @@ export class NzTestTreeSelectBasicComponent {
dropdownMatchSelectWidth = true;
nodes = [
new NzTreeNode({
title : 'root1',
key : '1001',
title: 'root1',
key: '1001',
children: [
{
title : 'child1',
key : '10001',
title: 'child1',
key: '10001',
children: [
{
title : 'child1.1',
key : '100011',
title: 'child1.1',
key: '100011',
children: []
},
{
title : 'child1.2',
key : '100012',
title: 'child1.2',
key: '100012',
children: [
{
title : 'grandchild1.2.1',
key : '1000121',
isLeaf : true,
title: 'grandchild1.2.1',
key: '1000121',
isLeaf: true,
disabled: true
},
{
title : 'grandchild1.2.2',
key : '1000122',
title: 'grandchild1.2.2',
key: '1000122',
isLeaf: true
}
]
Expand All @@ -455,22 +472,22 @@ export class NzTestTreeSelectBasicComponent {
]
}),
new NzTreeNode({
title : 'root2',
key : '1002',
title: 'root2',
key: '1002',
children: [
{
title : 'child2.1',
key : '10021',
children : [],
title: 'child2.1',
key: '10021',
children: [],
disableCheckbox: true
},
{
title : 'child2.2',
key : '10022',
title: 'child2.2',
key: '10022',
children: [
{
title : 'grandchild2.2.1',
key : '100221',
title: 'grandchild2.2.1',
key: '100221',
isLeaf: true
}
]
Expand Down Expand Up @@ -500,36 +517,36 @@ export class NzTestTreeSelectBasicComponent {
})
export class NzTestTreeSelectCheckableComponent {
@ViewChild(NzTreeSelectComponent) nzSelectTreeComponent: NzTreeSelectComponent;
expandKeys = [ '1001', '10001' ];
value = [ '1000122' ];
expandKeys = ['1001', '10001'];
value = ['1000122'];
showSearch = false;
nodes = [
new NzTreeNode({
title : 'root1',
key : '1001',
title: 'root1',
key: '1001',
children: [
{
title : 'child1',
key : '10001',
title: 'child1',
key: '10001',
children: [
{
title : 'child1.1',
key : '100011',
title: 'child1.1',
key: '100011',
children: []
},
{
title : 'child1.2',
key : '100012',
title: 'child1.2',
key: '100012',
children: [
{
title : 'grandchild1.2.1',
key : '1000121',
isLeaf : true,
title: 'grandchild1.2.1',
key: '1000121',
isLeaf: true,
disabled: true
},
{
title : 'grandchild1.2.2',
key : '1000122',
title: 'grandchild1.2.2',
key: '1000122',
isLeaf: true
}
]
Expand All @@ -539,22 +556,22 @@ export class NzTestTreeSelectCheckableComponent {
]
}),
new NzTreeNode({
title : 'root2',
key : '1002',
title: 'root2',
key: '1002',
children: [
{
title : 'child2.1',
key : '10021',
children : [],
title: 'child2.1',
key: '10021',
children: [],
disableCheckbox: true
},
{
title : 'child2.2',
key : '10022',
title: 'child2.2',
key: '10022',
children: [
{
title : 'grandchild2.2.1',
key : '100221',
title: 'grandchild2.2.1',
key: '100221',
isLeaf: true
}
]
Expand Down Expand Up @@ -584,16 +601,16 @@ export class NzTestTreeSelectFormComponent {
formGroup: FormGroup;
nodes = [
new NzTreeNode({
title : 'root2',
key : '1002',
title: 'root2',
key: '1002',
children: [
{
title: 'child2.1',
key : '10021'
key: '10021'
},
{
title: 'child2.2',
key : '10022'
key: '10022'
}
]
})
Expand Down

0 comments on commit 6ee20c7

Please sign in to comment.