feat(module:modal): support autofocus

close NG-ZORRO#3423, close NG-ZORRO#4126
hsuanxyz · Feb 3, 2020 · fc46901 · fc46901
1 parent 7749b07
commit fc46901
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 5 deletions.
diff --git a/components/modal/doc/index.en-US.md b/components/modal/doc/index.en-US.md
@@ -58,6 +58,7 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod
 | nzContent         | Content | string / TemplateRef / Component / ng-content | - |
 | nzComponentParams | When nzContent is a Component, the attributes in this parameter will be passed to the nzContent instance | `object` | - |
 | nzIconType        | Icon type of the Icon component. <i>Only valid in confirm box mode</i> | `string` | question-circle |
+| nzAutofocus        | autofocus and the position，disabled when is `null` | `'ok' \| 'cancel' \| 'auto' \| null` | `'auto'` |
 
 #### Attentions
 

diff --git a/components/modal/doc/index.zh-CN.md b/components/modal/doc/index.zh-CN.md
@@ -58,7 +58,9 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 | nzOnOk            | 点击确定回调（若nzContent为Component，则将会以该Component实例作为参数）。<i>注：当以`NzModalService.create`创建时，此参数应传入function（回调函数）。该函数可返回promise，待执行完毕或promise结束时，将自动关闭对话框（返回false可阻止关闭）</i> | EventEmitter | - |
 | nzContent         | 内容 | string<br>TemplateRef<br>Component<br>ng-content | - |
 | nzComponentParams | 当nzContent为组件类(Component)时，该参数中的属性将传入nzContent实例中 | `object` | - |
-| nzIconType        | 图标 Icon 类型。<i>仅 确认框模式 下有效</i> | `string` | question-circle |
+| nzIconType        | 图标 Icon 类型。<i>仅 确认框模式 下有效</i> | `string` | `'question-circle'` |
+| nzAutofocus        | 自动聚焦及聚焦位置，为 `null` 时禁用 | `'ok' \| 'cancel' \| 'auto' \| null` | `'auto'` |
+
 
 #### 注意
 

diff --git a/components/modal/modal-confirm-container.component.ts b/components/modal/modal-confirm-container.component.ts
@@ -58,6 +58,7 @@ import { ModalConfig } from './nz-modal.type';
             <div class="ant-modal-confirm-btns">
               <button
                 *ngIf="config.nzCancelText !== null"
+                [attr.cdkFocusInitial]="config.nzAutofocus === 'cancel'"
                 nz-button
                 (click)="onCancel()"
                 [nzLoading]="config.nzCancelLoading"
@@ -67,6 +68,7 @@ import { ModalConfig } from './nz-modal.type';
               </button>
               <button
                 *ngIf="config.nzOkText !== null"
+                [attr.cdkFocusInitial]="config.nzAutofocus === 'ok'"
                 nz-button
                 [nzType]="config.nzOkType"
                 (click)="onOk()"

diff --git a/components/modal/modal-container.component.ts b/components/modal/modal-container.component.ts
@@ -20,7 +20,6 @@ import {
   EmbeddedViewRef,
   EventEmitter,
   Inject,
-  Input,
   NgZone,
   Optional,
   Renderer2,
@@ -88,8 +87,6 @@ const FADE_CLASS_NAME_MAP = {
 export class NzModalContainerComponent extends BasePortalOutlet {
   @ViewChild(CdkPortalOutlet, { static: true }) portalOutlet: CdkPortalOutlet;
   @ViewChild('modalElement', { static: true }) modalElementRef: ElementRef<HTMLDivElement>;
-  @Input() autoFocus = false;
-  @Input() zIndex = 1000;
   width = '520px';
 
   animationStateChanged = new EventEmitter<AnimationEvent>();
@@ -188,7 +185,7 @@ export class NzModalContainerComponent extends BasePortalOutlet {
       this.focusTrap = this.focusTrapFactory.create(element);
     }
 
-    if (this.autoFocus) {
+    if (this.config.nzAutofocus) {
       this.focusTrap.focusInitialElementWhenReady().then();
     } else {
       const activeElement = this.document.activeElement;

diff --git a/components/modal/modal-footer.component.ts b/components/modal/modal-footer.component.ts
@@ -45,6 +45,7 @@ import { ModalButtonOptions, ModalConfig } from './nz-modal.type';
       <ng-template #defaultFooterButtons>
         <button
           *ngIf="config.nzCancelText !== null"
+          [attr.cdkFocusInitial]="config.nzAutofocus === 'cancel'"
           nz-button
           (click)="onCancel()"
           [nzLoading]="config.nzCancelLoading"
@@ -54,6 +55,7 @@ import { ModalButtonOptions, ModalConfig } from './nz-modal.type';
         </button>
         <button
           *ngIf="config.nzOkText !== null"
+          [attr.cdkFocusInitial]="config.nzAutofocus === 'ok'"
           nz-button
           [nzType]="config.nzOkType"
           (click)="onOk()"

diff --git a/components/modal/nz-modal.type.ts b/components/modal/nz-modal.type.ts
@@ -26,6 +26,7 @@ export class ModalConfig<T = any, R = any> implements ModalOptions {
   nzCancelDisabled?: boolean = false;
   nzCancelLoading?: boolean = false;
   nzNoAnimation?: boolean = false;
+  nzAutofocus?: 'ok' | 'cancel' | 'auto' | null = 'auto';
   nzMask?: boolean = true;
   nzMaskClosable?: boolean = true;
   nzKeyboard?: boolean = true;