From ffcb7095873a87243ff44edd3719ce2c04c6957e Mon Sep 17 00:00:00 2001
From: Artur Androsovych <arthurandrosovich@gmail.com>
Date: Mon, 29 Nov 2021 09:15:24 +0200
Subject: [PATCH] perf(module:modal): do not run change detection when focusing
 element (#7070)

---
 .../modal/modal-confirm-container.component.ts   | 16 +++++++++++++++-
 components/modal/modal-container.component.ts    | 15 ++++++++++++++-
 components/modal/modal-container.ts              |  6 ++++--
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/components/modal/modal-confirm-container.component.ts b/components/modal/modal-confirm-container.component.ts
index 96da138d646..4a6c513d8d6 100644
--- 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
index a62d5634083..0a8d63a9f64 100644
--- 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
index 3dc9edcb035..77a7f51d55b 100644
--- 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)) {