perf(module:modal): do not run change detection when focusing element (…

…#7070)
NG-ZORRO · Nov 29, 2021 · ffcb709 · ffcb709
1 parent a972d7b
commit ffcb709
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/components/modal/modal-confirm-container.component.ts b/components/modal/modal-confirm-container.component.ts
@@ -14,6 +14,7 @@ import {
   ElementRef,
   EventEmitter,
   Inject,
+  NgZone,
   Optional,
   Output,
   Renderer2,
@@ -114,6 +115,7 @@ export class NzModalConfirmContainerComponent extends BaseModalContainerComponen
   locale!: NzModalI18nInterface;
 
   constructor(
+    ngZone: NgZone,
     private i18n: NzI18nService,
     elementRef: ElementRef,
     focusTrapFactory: FocusTrapFactory,
@@ -125,7 +127,19 @@ export class NzModalConfirmContainerComponent extends BaseModalContainerComponen
     @Optional() @Inject(DOCUMENT) document: NzSafeAny,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string
   ) {
-    super(elementRef, focusTrapFactory, cdr, render, overlayRef, nzConfigService, config, document, animationType);
+    super(
+      ngZone,
+      elementRef,
+      focusTrapFactory,
+      cdr,
+      render,
+      overlayRef,
+      nzConfigService,
+      config,
+      document,
+      animationType
+    );
+
     this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.locale = this.i18n.getLocaleData('Modal');
     });

diff --git a/components/modal/modal-container.component.ts b/components/modal/modal-container.component.ts
@@ -13,6 +13,7 @@ import {
   Component,
   ElementRef,
   Inject,
+  NgZone,
   Optional,
   Renderer2,
   ViewChild
@@ -78,6 +79,7 @@ export class NzModalContainerComponent extends BaseModalContainerComponent {
   @ViewChild(CdkPortalOutlet, { static: true }) portalOutlet!: CdkPortalOutlet;
   @ViewChild('modalElement', { static: true }) modalElementRef!: ElementRef<HTMLDivElement>;
   constructor(
+    ngZone: NgZone,
     elementRef: ElementRef,
     focusTrapFactory: FocusTrapFactory,
     cdr: ChangeDetectorRef,
@@ -88,6 +90,17 @@ export class NzModalContainerComponent extends BaseModalContainerComponent {
     @Optional() @Inject(DOCUMENT) document: NzSafeAny,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string
   ) {
-    super(elementRef, focusTrapFactory, cdr, render, overlayRef, nzConfigService, config, document, animationType);
+    super(
+      ngZone,
+      elementRef,
+      focusTrapFactory,
+      cdr,
+      render,
+      overlayRef,
+      nzConfigService,
+      config,
+      document,
+      animationType
+    );
   }
 }
diff --git a/components/modal/modal-container.ts b/components/modal/modal-container.ts
@@ -15,6 +15,7 @@ import {
   ElementRef,
   EmbeddedViewRef,
   EventEmitter,
+  NgZone,
   OnDestroy,
   Renderer2
 } from '@angular/core';
@@ -68,6 +69,7 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD
   }
 
   constructor(
+    protected ngZone: NgZone,
     protected elementRef: ElementRef,
     protected focusTrapFactory: FocusTrapFactory,
     public cdr: ChangeDetectorRef,
@@ -167,7 +169,7 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD
     if (this.document) {
       this.elementFocusedBeforeModalWasOpened = this.document.activeElement as HTMLElement;
       if (this.elementRef.nativeElement.focus) {
-        Promise.resolve().then(() => this.elementRef.nativeElement.focus());
+        this.ngZone.runOutsideAngular(() => Promise.resolve().then(() => this.elementRef.nativeElement.focus()));
       }
     }
   }
@@ -176,7 +178,7 @@ export class BaseModalContainerComponent extends BasePortalOutlet implements OnD
     const element = this.elementRef.nativeElement;
 
     if (this.config.nzAutofocus) {
-      this.focusTrap.focusInitialElementWhenReady().then();
+      this.focusTrap.focusInitialElementWhenReady();
     } else {
       const activeElement = this.document.activeElement;
       if (activeElement !== element && !element.contains(activeElement)) {