perf(module:date-picker): do not trigger change detection on mousedown (#7860)

Author: arturovt

components/date-picker/date-picker.component.ts

@@ -26,8 +26,8 @@ import {
   Host,
   Inject,
   Input,
+  NgZone,
   OnChanges,
-  OnDestroy,
   OnInit,
   Optional,
   Output,
@@ -40,7 +40,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { of as observableOf, Subject } from 'rxjs';
+import { fromEvent, of as observableOf } from 'rxjs';
 import { distinctUntilChanged, map, takeUntil, withLatestFrom } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
@@ -49,6 +49,7 @@ import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/con
 import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
 import { DATE_PICKER_POSITION_MAP, DEFAULT_DATE_PICKER_POSITIONS } from 'ng-zorro-antd/core/overlay';
+import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { CandyDate, cloneDate, CompatibleValue, wrongSortOrder } from 'ng-zorro-antd/core/time';
 import {
   BooleanInput,
@@ -241,6 +242,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     '(click)': 'onClickInputBox($event)'
   },
   providers: [
+    NzDestroyService,
     DatePickerService,
     {
       provide: NG_VALUE_ACCESSOR,
@@ -250,7 +252,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
   ],
   animations: [slideMotion]
 })
-export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit, ControlValueAccessor {
+export class NzDatePickerComponent implements OnInit, OnChanges, AfterViewInit, ControlValueAccessor {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzAllowClear: BooleanInput;
   static ngAcceptInputType_nzAutoFocus: BooleanInput;
@@ -274,7 +276,6 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
   hasFeedback: boolean = false;
 
   public panelMode: NzDateMode | NzDateMode[] = 'date';
-  private destroyed$: Subject<void> = new Subject();
   private isCustomPlaceHolder: boolean = false;
   private isCustomFormat: boolean = false;
   private showTime: SupportTimeOptions | boolean = false;
@@ -358,23 +359,33 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
     if (this.isRange && this.platform.isBrowser) {
       this.nzResizeObserver
         .observe(this.elementRef)
-        .pipe(takeUntil(this.destroyed$))
+        .pipe(takeUntil(this.destroy$))
         .subscribe(() => {
           this.updateInputWidthAndArrowLeft();
         });
     }
 
-    this.datePickerService.inputPartChange$.pipe(takeUntil(this.destroyed$)).subscribe(partType => {
+    this.datePickerService.inputPartChange$.pipe(takeUntil(this.destroy$)).subscribe(partType => {
       if (partType) {
         this.datePickerService.activeInput = partType;
       }
       this.focus();
       this.updateInputWidthAndArrowLeft();
     });
 
-    // prevent mousedown event to trigger focusout event when click in date picker
-    // see: https://github.com/NG-ZORRO/ng-zorro-antd/issues/7450
-    this.elementRef.nativeElement.addEventListener('mousedown', this.onMouseDown);
+    if (this.platform.isBrowser) {
+      this.ngZone.runOutsideAngular(() =>
+        // prevent mousedown event to trigger focusout event when click in date picker
+        // see: https://github.com/NG-ZORRO/ng-zorro-antd/issues/7450
+        fromEvent(this.elementRef.nativeElement, 'mousedown')
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(event => {
+            if ((event.target as HTMLInputElement).tagName.toLowerCase() !== 'input') {
+              event.preventDefault();
+            }
+          })
+      );
+    }
   }
 
   updateInputWidthAndArrowLeft(): void {
@@ -413,12 +424,6 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
     }
   }
 
-  onMouseDown(event: Event): void {
-    if ((event.target as HTMLInputElement).tagName.toLowerCase() !== 'input') {
-      event.preventDefault();
-    }
-  }
-
   onFocus(event: FocusEvent, partType?: RangePartType): void {
     event.preventDefault();
     if (partType) {
@@ -430,7 +435,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
   // blur event has not the relatedTarget in IE11, use focusout instead.
   onFocusout(event: FocusEvent): void {
     event.preventDefault();
-    if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
+    if (!this.elementRef.nativeElement.contains(<Node>event.relatedTarget)) {
       this.checkAndClose();
     }
     this.renderClass(false);
@@ -596,10 +601,12 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
     protected i18n: NzI18nService,
     protected cdr: ChangeDetectorRef,
     private renderer: Renderer2,
-    private elementRef: ElementRef,
+    private ngZone: NgZone,
+    private elementRef: ElementRef<HTMLElement>,
     private dateHelper: DateHelperService,
     private nzResizeObserver: NzResizeObserver,
     private platform: Platform,
+    private destroy$: NzDestroyService,
     @Inject(DOCUMENT) doc: NzSafeAny,
     @Optional() private directionality: Directionality,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective,
@@ -618,21 +625,21 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
         }),
         withLatestFrom(this.nzFormNoStatusService ? this.nzFormNoStatusService.noFormStatus : observableOf(false)),
         map(([{ status, hasFeedback }, noStatus]) => ({ status: noStatus ? '' : status, hasFeedback })),
-        takeUntil(this.destroyed$)
+        takeUntil(this.destroy$)
       )
       .subscribe(({ status, hasFeedback }) => {
         this.setStatusStyles(status, hasFeedback);
       });
 
     // Subscribe the every locale change if the nzLocale is not handled by user
     if (!this.nzLocale) {
-      this.i18n.localeChange.pipe(takeUntil(this.destroyed$)).subscribe(() => this.setLocale());
+      this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => this.setLocale());
     }
 
     // Default value
     this.datePickerService.isRange = this.isRange;
     this.datePickerService.initValue(true);
-    this.datePickerService.emitValue$.pipe(takeUntil(this.destroyed$)).subscribe(() => {
+    this.datePickerService.emitValue$.pipe(takeUntil(this.destroy$)).subscribe(() => {
       const value = this.datePickerService.value;
       const datePickerPreviousValue = this.datePickerService.initialValue;
 
@@ -675,15 +682,15 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
       this.close();
     });
 
-    this.directionality.change?.pipe(takeUntil(this.destroyed$)).subscribe((direction: Direction) => {
+    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
       this.dir = direction;
       this.cdr.detectChanges();
     });
     this.dir = this.directionality.value;
     this.inputValue = this.isRange ? ['', ''] : '';
     this.setModeAndFormat();
 
-    this.datePickerService.valueChange$.pipe(takeUntil(this.destroyed$)).subscribe(() => {
+    this.datePickerService.valueChange$.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this.updateInputValue();
     });
   }
@@ -727,12 +734,6 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
     }
   }
 
-  ngOnDestroy(): void {
-    this.destroyed$.next();
-    this.destroyed$.complete();
-    this.elementRef.nativeElement.removeEventListener('mousedown', this.onMouseDown);
-  }
-
   setModeAndFormat(): void {
     const inputFormats: { [key in NzDateMode]?: string } = {
       year: 'yyyy',