Skip to content

Commit

Permalink
fix(module:select): prevent hidden options from being selected (NG-ZO…
Browse files Browse the repository at this point in the history
…RRO#4382)

* fix(module:select): prevent hidden options from being selected (NG-ZORRO#4377)

* fix(module:select): add test cases

* fix(module:select): fix test cases

close NG-ZORRO#4377
  • Loading branch information
QichenZhu authored and chensimeng committed Nov 8, 2019
1 parent 03a0276 commit 6818439
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 6 deletions.
34 changes: 34 additions & 0 deletions components/select/nz-select.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,38 @@ describe('nz-select component', () => {
fixture.detectChanges();
expect(testComponent.open).toBe(false);
}));
it('should skip disabled or hidden options on keydown events', fakeAsync(() => {
fixture.detectChanges();
select.nativeElement.click();
fixture.detectChanges();
overlayContainerElement.querySelector('li')!.click();
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.selectedValue).toBe('jack');
select.nativeElement.click();
fixture.detectChanges();
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', UP_ARROW);
fixture.detectChanges();
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', ENTER);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.selectedValue).toBe('lucy');
select.nativeElement.click();
fixture.detectChanges();
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', UP_ARROW);
fixture.detectChanges();
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', DOWN_ARROW);
fixture.detectChanges();
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', DOWN_ARROW);
fixture.detectChanges();
dispatchKeyboardEvent(select.nativeElement.querySelector('.ant-select-selection'), 'keydown', ENTER);
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.selectedValue).toBe('jack');
}));
});
describe('tags', () => {
let fixture: ComponentFixture<NzTestSelectTagsComponent>;
Expand Down Expand Up @@ -440,6 +472,8 @@ describe('nz-select component', () => {
<nz-option nzValue="jack" nzLabel="Jack"></nz-option>
<nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
<nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
<nz-option nzValue="hidden" nzLabel="Hidden" nzHide></nz-option>
<nz-option nzValue="disabledAndHidden" nzLabel="DisabledAndHidden" nzDisabled nzHide></nz-option>
</nz-select>
<ng-template #custom let-selected>
<div>Label: {{ selected.nzLabel }}</div>
Expand Down
16 changes: 10 additions & 6 deletions components/select/nz-select.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -325,18 +325,22 @@ export class NzSelectService {
}
const keyCode = e.keyCode;
const eventTarget = e.target as HTMLInputElement;
const listOfFilteredOptionWithoutDisabled = this.listOfFilteredOption.filter(item => !item.nzDisabled);
const activatedIndex = listOfFilteredOptionWithoutDisabled.findIndex(item => item === this.activatedOption);
const listOfFilteredOptionWithoutDisabledOrHidden = this.listOfFilteredOption.filter(
item => !item.nzDisabled && !item.nzHide
);
const activatedIndex = listOfFilteredOptionWithoutDisabledOrHidden.findIndex(item => item === this.activatedOption);
switch (keyCode) {
case UP_ARROW:
e.preventDefault();
const preIndex = activatedIndex > 0 ? activatedIndex - 1 : listOfFilteredOptionWithoutDisabled.length - 1;
this.updateActivatedOption(listOfFilteredOptionWithoutDisabled[preIndex]);
const preIndex =
activatedIndex > 0 ? activatedIndex - 1 : listOfFilteredOptionWithoutDisabledOrHidden.length - 1;
this.updateActivatedOption(listOfFilteredOptionWithoutDisabledOrHidden[preIndex]);
break;
case DOWN_ARROW:
e.preventDefault();
const nextIndex = activatedIndex < listOfFilteredOptionWithoutDisabled.length - 1 ? activatedIndex + 1 : 0;
this.updateActivatedOption(listOfFilteredOptionWithoutDisabled[nextIndex]);
const nextIndex =
activatedIndex < listOfFilteredOptionWithoutDisabledOrHidden.length - 1 ? activatedIndex + 1 : 0;
this.updateActivatedOption(listOfFilteredOptionWithoutDisabledOrHidden[nextIndex]);
if (!this.disabled && !this.open) {
this.setOpenState(true);
}
Expand Down

0 comments on commit 6818439

Please sign in to comment.