fix(module:modal): nzAutofocus doesn't work correctly (#5313)

Co-authored-by: rorry <luolei@haizhi.com>
NG-ZORRO · May 25, 2020 · 7ad64b8 · 7ad64b8
1 parent e13142c
commit 7ad64b8
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/components/modal/modal-confirm-container.component.ts b/components/modal/modal-confirm-container.component.ts
@@ -66,7 +66,7 @@ import { ModalOptions } from './modal-types';
             <div class="ant-modal-confirm-btns">
               <button
                 *ngIf="config.nzCancelText !== null"
-                [attr.cdkFocusInitial]="config.nzAutofocus === 'cancel'"
+                [attr.cdkFocusInitial]="config.nzAutofocus === 'cancel' || null"
                 nz-button
                 (click)="onCancel()"
                 [nzLoading]="!!config.nzCancelLoading"
@@ -76,7 +76,7 @@ import { ModalOptions } from './modal-types';
               </button>
               <button
                 *ngIf="config.nzOkText !== null"
-                [attr.cdkFocusInitial]="config.nzAutofocus === 'ok'"
+                [attr.cdkFocusInitial]="config.nzAutofocus === 'ok' || null"
                 nz-button
                 [nzType]="config.nzOkType!"
                 (click)="onOk()"

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

diff --git a/components/modal/modal.component.ts b/components/modal/modal.component.ts
@@ -83,6 +83,7 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
   @Input() nzOkType: NzButtonType = 'primary';
   @Input() nzIconType: string = 'question-circle'; // Confirm Modal ONLY
   @Input() nzModalType: ModalTypes = 'default';
+  @Input() nzAutofocus: 'ok' | 'cancel' | 'auto' | null = 'auto';
 
   // TODO(@hsuanxyz) Input will not be supported
   @Input()

diff --git a/components/modal/utils.ts b/components/modal/utils.ts
@@ -59,7 +59,8 @@ export function getConfigFromComponent(component: NzModalComponent): ModalOption
     nzOnCancel,
     nzAfterOpen,
     nzAfterClose,
-    nzCloseOnNavigation
+    nzCloseOnNavigation,
+    nzAutofocus
   } = component;
   return {
     nzMask,
@@ -93,6 +94,7 @@ export function getConfigFromComponent(component: NzModalComponent): ModalOption
     nzOnCancel,
     nzAfterOpen,
     nzAfterClose,
-    nzCloseOnNavigation
+    nzCloseOnNavigation,
+    nzAutofocus
   };
 }