fix(module:select): prevent hidden options from being selected (NG-ZO…

…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
Ricbet · Apr 9, 2020 · 23d47d9 · 23d47d9
1 parent ffa5b46
commit 23d47d9
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/components/select/nz-select.component.spec.ts b/components/select/nz-select.component.spec.ts
@@ -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>;
@@ -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>

diff --git a/components/select/nz-select.service.ts b/components/select/nz-select.service.ts
@@ -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);
         }