fix(module:select): fix keyboard event error when option data is empty (

#7222) close #7242 * fix(module:select): fix keyboard event error when option data is null * chore: move the logic place * test(module:select): add test case
NG-ZORRO · Feb 18, 2022 · 4bd86ca · 4bd86ca
1 parent ad547fb
commit 4bd86ca
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -403,14 +403,14 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
     switch (e.keyCode) {
       case UP_ARROW:
         e.preventDefault();
-        if (this.nzOpen) {
+        if (this.nzOpen && listOfFilteredOptionNotDisabled.length > 0) {
           const preIndex = activatedIndex > 0 ? activatedIndex - 1 : listOfFilteredOptionNotDisabled.length - 1;
           this.activatedValue = listOfFilteredOptionNotDisabled[preIndex].nzValue;
         }
         break;
       case DOWN_ARROW:
         e.preventDefault();
-        if (this.nzOpen) {
+        if (this.nzOpen && listOfFilteredOptionNotDisabled.length > 0) {
           const nextIndex = activatedIndex < listOfFilteredOptionNotDisabled.length - 1 ? activatedIndex + 1 : 0;
           this.activatedValue = listOfFilteredOptionNotDisabled[nextIndex].nzValue;
         } else {

diff --git a/components/select/select.spec.ts b/components/select/select.spec.ts
@@ -331,6 +331,24 @@ describe('select', () => {
       expect(component.openChange).toHaveBeenCalledWith(false);
       expect(component.openChange).toHaveBeenCalledTimes(3);
     }));
+
+    it('should not throw error with keydown up arrow and down arrow event when listOfOption is empty', fakeAsync(() => {
+      const flushChanges = (): void => {
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+      };
+      component.listOfOption = [];
+      component.nzOpen = true;
+      flushChanges();
+      const inputElement = selectElement.querySelector('input')!;
+      dispatchKeyboardEvent(inputElement, 'keydown', UP_ARROW, inputElement);
+      flushChanges();
+      dispatchKeyboardEvent(inputElement, 'keydown', DOWN_ARROW, inputElement);
+      flushChanges();
+      expect(component.valueChange).toHaveBeenCalledTimes(0);
+    }));
+
     it('should mouseenter activated option work', fakeAsync(() => {
       const flushChanges = (): void => {
         fixture.detectChanges();