From 6818439b7efebcb02bc7dc2812e0463f340e139a Mon Sep 17 00:00:00 2001
From: QichenZhu <57348009+QichenZhu@users.noreply.github.com>
Date: Fri, 8 Nov 2019 16:32:36 +0800
Subject: [PATCH] fix(module:select): prevent hidden options from being
 selected (#4382)

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

* fix(module:select): add test cases

* fix(module:select): fix test cases

close #4377
---
 components/select/nz-select.component.spec.ts | 34 +++++++++++++++++++
 components/select/nz-select.service.ts        | 16 +++++----
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/components/select/nz-select.component.spec.ts b/components/select/nz-select.component.spec.ts
index c7842457180..5255ada9b15 100644
--- 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
index 9ace4e17d63..8b28495854d 100644
--- 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);
         }