Skip to content

Commit

Permalink
fix(module:cascader): correct menu display level (#8866)
Browse files Browse the repository at this point in the history
  • Loading branch information
@WwwHhhYran
WwwHhhYran authored Nov 18, 2024
1 parent 30c25f0 commit 5fec53e
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 15 deletions.
5 changes: 5 additions & 0 deletions components/cascader/cascader.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -734,6 +734,7 @@ export class NzCascaderComponent
const options = this.cascaderService.activatedOptions;
if (options.length) {
options.pop(); // Remove the last one
this.cascaderService.setOptionDeactivatedSinceColumn(options.length); // collapse menu
}
}

Expand Down Expand Up @@ -790,6 +791,10 @@ export class NzCascaderComponent
this.blur();
this.clearDelayMenuTimer();
this.setMenuVisible(false);
// if select none, clear previous state
if (!this.hasValue && this.cascaderService.columns.length) {
this.cascaderService.dropBehindColumns(0);
}
}

/**
Expand Down
4 changes: 2 additions & 2 deletions components/cascader/cascader.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,8 +358,8 @@ export class NzCascaderService implements OnDestroy {
if (!arraysEqual(existingOptions, options)) {
options.forEach(o => (o.parent = parent));
this.columns[columnIndex] = options;
this.dropBehindColumns(columnIndex);
}
this.dropBehindColumns(columnIndex);
}

/**
Expand All @@ -377,7 +377,7 @@ export class NzCascaderService implements OnDestroy {
this.activatedOptions = this.activatedOptions.splice(0, lastReserveIndex + 1);
}

private dropBehindColumns(lastReserveIndex: number): void {
dropBehindColumns(lastReserveIndex: number): void {
if (lastReserveIndex < this.columns.length - 1) {
this.columns = this.columns.slice(0, lastReserveIndex + 1);
}
Expand Down
71 changes: 58 additions & 13 deletions components/cascader/cascader.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { provideNoopAnimations } from '@angular/platform-browser/animations';
import {
createFakeEvent,
createMouseEvent,
dispatchFakeEvent,
dispatchKeyboardEvent,
dispatchMouseEvent
} from 'ng-zorro-antd/core/testing';
Expand Down Expand Up @@ -741,9 +742,9 @@ describe('cascader', () => {
expect(testComponent.cascader.menuVisible).toBe(true);
expect(getAllColumns().length).toBe(3);

const itemEl1 = getItemAtColumnAndRow(1, 1)!;
const itemEl2 = getItemAtColumnAndRow(2, 1)!;
const itemEl3 = getItemAtColumnAndRow(3, 1)!;
let itemEl1 = getItemAtColumnAndRow(1, 1)!;
let itemEl2 = getItemAtColumnAndRow(2, 1)!;
let itemEl3 = getItemAtColumnAndRow(3, 1)!;

expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
expect(itemEl2.classList).toContain('ant-cascader-menu-item-active');
Expand All @@ -755,14 +756,17 @@ describe('cascader', () => {
fixture.detectChanges();
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', LEFT_ARROW);
fixture.detectChanges();
expect(getAllColumns().length).toBe(3);
itemEl1 = getItemAtColumnAndRow(1, 1)!;
itemEl2 = getItemAtColumnAndRow(2, 1)!;
itemEl3 = getItemAtColumnAndRow(3, 1)!;
expect(itemEl1.classList).not.toContain('ant-cascader-menu-item-active');
expect(itemEl2.classList).not.toContain('ant-cascader-menu-item-active');
expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active');
expect(itemEl2).toBeNull();
expect(itemEl3).toBeNull();
expect(getAllColumns().length).toBe(1);
expect(testComponent.values!.join(',')).toBe('zhejiang,hangzhou,xihu');

itemEl1.click();
const itemEl4 = getItemAtColumnAndRow(2, 2)!;

itemEl4.click(); // 选中一个叶子
fixture.detectChanges();
tick(300);
Expand Down Expand Up @@ -870,6 +874,44 @@ describe('cascader', () => {
expect(testComponent.cascader.menuVisible).toBe(false);
}));

it('should init menu when selecting cancel', fakeAsync(() => {
// cancel select by ESCAPE
fixture.detectChanges();
testComponent.cascader.setMenuVisible(true);
let itemEl1 = getItemAtColumnAndRow(1, 1)!;
itemEl1.click();
let itemEl2 = getItemAtColumnAndRow(2, 1)!;
itemEl2.click();
let itemEl3 = getItemAtColumnAndRow(3, 1)!;
expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
expect(itemEl2.classList).toContain('ant-cascader-menu-item-active');
expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active');
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', ESCAPE);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.cascader.menuVisible).toBe(false);
expect(testComponent.cascader.cascaderService.columns.length).toBe(1);

// cancel select by clicking outside
fixture.detectChanges();
testComponent.cascader.setMenuVisible(true);
itemEl1 = getItemAtColumnAndRow(1, 1)!;
itemEl1.click();
itemEl2 = getItemAtColumnAndRow(2, 1)!;
itemEl2.click();
itemEl3 = getItemAtColumnAndRow(3, 1)!;
expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
expect(itemEl2.classList).toContain('ant-cascader-menu-item-active');
expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active');
dispatchFakeEvent(document.body, 'click');
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.cascader.menuVisible).toBe(false);
expect(testComponent.cascader.cascaderService.columns.length).toBe(1);
}));

it('should nzBackdrop works', fakeAsync(() => {
testComponent.nzBackdrop = true;
fixture.detectChanges();
Expand Down Expand Up @@ -941,9 +983,9 @@ describe('cascader', () => {
fixture.detectChanges();
expect(getAllColumns().length).toBe(3);

const itemEl1 = getItemAtColumnAndRow(1, 1)!;
const itemEl2 = getItemAtColumnAndRow(2, 1)!;
const itemEl3 = getItemAtColumnAndRow(3, 1)!;
let itemEl1 = getItemAtColumnAndRow(1, 1)!;
let itemEl2 = getItemAtColumnAndRow(2, 1)!;
let itemEl3 = getItemAtColumnAndRow(3, 1)!;
expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
expect(itemEl2.classList).toContain('ant-cascader-menu-item-active');
expect(itemEl3.classList).toContain('ant-cascader-menu-item-active');
Expand All @@ -954,14 +996,17 @@ describe('cascader', () => {
expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active');
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', LEFT_ARROW);
fixture.detectChanges();
itemEl3 = getItemAtColumnAndRow(3, 1)!;
expect(itemEl1.classList).toContain('ant-cascader-menu-item-active');
expect(itemEl2.classList).not.toContain('ant-cascader-menu-item-active');
expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active');
expect(itemEl3).toBeNull();
expect(getAllColumns().length).toBe(2);
dispatchKeyboardEvent(cascader.nativeElement, 'keydown', LEFT_ARROW);
fixture.detectChanges();
itemEl2 = getItemAtColumnAndRow(2, 1)!;
expect(itemEl1.classList).not.toContain('ant-cascader-menu-item-active');
expect(itemEl2.classList).not.toContain('ant-cascader-menu-item-active');
expect(itemEl3.classList).not.toContain('ant-cascader-menu-item-active');
expect(itemEl2).toBeNull();
expect(getAllColumns().length).toBe(1);
}));

it('should select option when press ENTER', fakeAsync(() => {
Expand Down

0 comments on commit 5fec53e

Please sign in to comment.