Skip to content

Commit

Permalink
fix(module:tree-select): fix tree-select overlay's index probelem NG-…
Browse files Browse the repository at this point in the history 
…ZORRO#2730
  • Loading branch information
@100cm
100cm committed Jan 11, 2019
1 parent dac6da1 commit d6e46a5
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 75 deletions.
18 changes: 10 additions & 8 deletions components/tree-select/nz-tree-select.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,14 +239,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
this.updateCdkConnectedOverlayStatus();
this.updatePosition();
this.updateDropDownClassMap();
if (this.overlayRef) {
this.overlayRef.updatePosition();
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);
}
this.updateOverlayIndex();
}
}

Expand Down Expand Up @@ -404,6 +397,15 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
this.overlayRef.updatePosition();
}

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);
}

updateInputWidth(): void {
if (this.isMultiple && this.inputElement) {
if (this.inputValue || this.isComposing) {
Expand Down
125 changes: 58 additions & 67 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 @@ -76,15 +76,6 @@ describe('tree-select component', () => {
fixture.detectChanges();
expect(treeSelectComponent.nzOpen).toBe(false);
});
it('should get overlayRef after overlay attach', () => {
treeSelect.nativeElement.click();
fixture.detectChanges();
expect(treeSelectComponent.nzOpen).toBe(true);
treeSelect.nativeElement.click();
fixture.detectChanges();
const ref = treeSelectComponent.overlayRef;
expect(ref).not.toBe(undefined);
});
it('should close when the outside clicks', fakeAsync(() => {
treeSelect.nativeElement.click();
fixture.detectChanges();
Expand Down Expand Up @@ -184,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 @@ -298,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 @@ -336,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 @@ -438,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 @@ -447,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 @@ -481,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 @@ -526,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 @@ -565,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 @@ -610,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 d6e46a5

Please sign in to comment.