feat(module:select): select on Tab support (#7728)

* feat(module:select): select on Tab support * Translation Update
NG-ZORRO · Dec 11, 2022 · d9f9092 · d9f9092
1 parent 4eb32fd
commit d9f9092
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 1 deletion.
diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md
@@ -63,6 +63,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | `TemplateRef<{ $implicit: any[] }>` | - |
 | `[nzOptionHeightPx]` | Each option height inside the dropdown | `number` | `32` |
 | `[nzOptionOverflowSize]` | Max option size inside the dropdown, overflow when exceed the size | `number` | `8` |
+| `[nzSelectOnTab]` | Allows to select an item with TAB key | `boolean` | `false` |
 | `(ngModelChange)` | Current selected nz-option value change callback. | `EventEmitter<any[]>` | - |
 | `(nzOpenChange)` | dropdown expand change callback | `EventEmitter<boolean>` | `false` |
 | `(nzScrollToBottom)` | Called when dropdown scrolls to bottom | `EventEmitter<any>` | - |

diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md
@@ -64,6 +64,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzOptions]` | option 列表，可以取代 nz-option，用法参见例子 | `Array<{ label: string  \| number \| TemplateRef<any>; value: any; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef<any>;}>` | - |
 | `[nzOptionHeightPx]` | 下拉菜单中每个 Option 的高度 | `number` | `32` |
 | `[nzOptionOverflowSize]` | 下拉菜单中最多展示的 Option 个数，超出部分滚动 | `number` | `8` |
+| `[nzSelectOnTab]` | 允许使用 TAB 键选择项目 | `boolean` | `false` |
 | `(ngModelChange)` | 选中的 nz-option 发生变化时，调用此函数 | `EventEmitter<any[]>` | - |
 | `(nzOpenChange)` | 下拉菜单打开状态变化回调 | `EventEmitter<boolean>` | - |
 | `(nzScrollToBottom)` | 下拉列表滚动到底部的回调 | `EventEmitter<any>` | - |

diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -245,6 +245,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
   @Input() @InputBoolean() nzServerSearch = false;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzOpen = false;
+  @Input() @InputBoolean() nzSelectOnTab = false;
   @Input() @WithConfig<boolean>() @InputBoolean() nzBackdrop = false;
   @Input() nzOptions: NzSelectOptionInterface[] = [];
 
@@ -464,7 +465,16 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
         }
         break;
       case TAB:
-        this.setOpenState(false);
+        if (this.nzSelectOnTab) {
+          if (this.nzOpen) {
+            e.preventDefault();
+            if (isNotNil(this.activatedValue)) {
+              this.onItemClick(this.activatedValue);
+            }
+          }
+        } else {
+          this.setOpenState(false);
+        }
         break;
       case ESCAPE:
         /**

diff --git a/components/select/select.spec.ts b/components/select/select.spec.ts
@@ -469,6 +469,50 @@ describe('select', () => {
         expect(document.querySelectorAll('nz-option-item.ant-select-item-option-selected').length).toBe(0);
       });
     }));
+    it('should select item on TAB when nzSelectOnTab is true', fakeAsync(() => {
+      const flushChanges = (): void => {
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+      };
+      component.nzSelectOnTab = true;
+      component.listOfOption = [
+        { nzValue: 'value_01', nzLabel: 'label_01' },
+        { nzValue: 'value_02', nzLabel: 'label_02' },
+        { nzValue: 'value_03', nzLabel: 'label_03' }
+      ];
+      component.nzOpen = true;
+      flushChanges();
+      const inputElement = selectElement.querySelector('input')!;
+      dispatchKeyboardEvent(inputElement, 'keydown', TAB, inputElement);
+      flushChanges();
+      expect(component.valueChange).toHaveBeenCalledWith('value_01');
+      flushChanges();
+      expect(component.openChange).toHaveBeenCalledWith(false);
+      expect(component.openChange).toHaveBeenCalledTimes(1);
+    }));
+    it('should close select and keep the same value on TAB when nzSelectOnTab is default(false)', fakeAsync(() => {
+      const flushChanges = (): void => {
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+      };
+      component.listOfOption = [
+        { nzValue: 'value_01', nzLabel: 'label_01' },
+        { nzValue: 'value_02', nzLabel: 'label_02' },
+        { nzValue: 'value_03', nzLabel: 'label_03' }
+      ];
+      component.value = 'value_02';
+      component.nzOpen = true;
+      flushChanges();
+      const inputElement = selectElement.querySelector('input')!;
+      dispatchKeyboardEvent(inputElement, 'keydown', TAB, inputElement);
+      flushChanges();
+      expect(component.valueChange).not.toHaveBeenCalled();
+      flushChanges();
+      expect(component.openChange).toHaveBeenCalledWith(false);
+      expect(component.openChange).toHaveBeenCalledTimes(1);
+    }));
   });
   describe('multiple template mode', () => {
     let testBed: ComponentBed<TestSelectTemplateMultipleComponent>;
@@ -1427,6 +1471,7 @@ describe('select', () => {
       [nzBackdrop]="nzBackdrop"
       [(nzOpen)]="nzOpen"
       [nzPlacement]="nzPlacement"
+      [nzSelectOnTab]="nzSelectOnTab"
       (ngModelChange)="valueChange($event)"
       (nzOnSearch)="searchValueChange($event)"
       (nzOpenChange)="openChange($event)"
@@ -1488,6 +1533,7 @@ export class TestSelectTemplateDefaultComponent {
   nzDisabled = false;
   nzOpen = false;
   nzBackdrop = false;
+  nzSelectOnTab = false;
   nzPlacement: NzSelectPlacementType | null = 'bottomLeft';
 }