fix(module:select): disabled option can be selected by Enter (#7686)

NG-ZORRO · Dec 11, 2022 · 5bdf244 · 5bdf244
1 parent d9f9092
commit 5bdf244
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -451,7 +451,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
       case ENTER:
         e.preventDefault();
         if (this.nzOpen) {
-          if (isNotNil(this.activatedValue)) {
+          if (isNotNil(this.activatedValue) && activatedIndex !== -1) {
             this.onItemClick(this.activatedValue);
           }
         } else {

diff --git a/components/select/select.spec.ts b/components/select/select.spec.ts
@@ -276,6 +276,58 @@ describe('select', () => {
       expect(selectElement.querySelector('input')!.getAttribute('disabled')).toBe('');
     }));
 
+    it('should select option by enter', fakeAsync(() => {
+      const flushChanges = (): void => {
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+      };
+      component.listOfOption = [
+        { nzValue: 'value', nzLabel: 'label' },
+        { nzValue: 'disabledValue', nzLabel: 'disabledLabel', nzDisabled: true }
+      ];
+      component.nzShowSearch = true;
+      component.nzOpen = true;
+
+      fixture.detectChanges();
+      const inputElement = selectElement.querySelector('input')!;
+      inputElement.value = 'label';
+
+      dispatchFakeEvent(inputElement, 'input');
+      flushChanges();
+      expect(component.searchValueChange).toHaveBeenCalledWith('label');
+
+      dispatchKeyboardEvent(inputElement, 'keydown', ENTER, inputElement);
+      flushChanges();
+      expect(component.value).toBe('value');
+    }));
+
+    it('should nzDisabled option works', fakeAsync(() => {
+      const flushChanges = (): void => {
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+      };
+      component.listOfOption = [
+        { nzValue: 'value', nzLabel: 'label' },
+        { nzValue: 'disabledValue', nzLabel: 'disabledLabel', nzDisabled: true }
+      ];
+      component.nzShowSearch = true;
+      component.nzOpen = true;
+
+      fixture.detectChanges();
+      const inputElement = selectElement.querySelector('input')!;
+      inputElement.value = 'disabled';
+
+      dispatchFakeEvent(inputElement, 'input');
+      flushChanges();
+      expect(component.searchValueChange).toHaveBeenCalledWith('disabled');
+
+      dispatchKeyboardEvent(inputElement, 'keydown', ENTER, inputElement);
+      flushChanges();
+      expect(component.value).not.toBe('disabledValue');
+    }));
+
     it('should nzBackdrop works', fakeAsync(() => {
       component.nzOpen = true;
       component.nzBackdrop = true;