perf(module:upload): do not trigger change detection for `nz-upload-b…

…tn` (#7037)
NG-ZORRO · Nov 12, 2021 · 7e587d1 · 7e587d1
1 parent d6ca43e
commit 7e587d1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/components/upload/upload-btn.component.ts b/components/upload/upload-btn.component.ts
@@ -32,7 +32,6 @@ import { NzUploadFile, NzUploadXHRArgs, ZipButtonOptions } from './interface';
     '[attr.tabindex]': '"0"',
     '[attr.role]': '"button"',
     '[class.ant-upload-disabled]': 'options.disabled',
-    '(keydown)': 'onKeyDown($event)',
     '(drop)': 'onFileDrop($event)',
     '(dragover)': 'onFileDrop($event)'
   },
@@ -45,22 +44,14 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
   @ViewChild('file', { static: true }) file!: ElementRef<HTMLInputElement>;
   @Input() options!: ZipButtonOptions;
+
   onClick(): void {
     if (this.options.disabled || !this.options.openFileDialogOnClick) {
       return;
     }
     this.file.nativeElement.click();
   }
 
-  onKeyDown(e: KeyboardEvent): void {
-    if (this.options.disabled) {
-      return;
-    }
-    if (e.key === 'Enter' || e.keyCode === ENTER) {
-      this.onClick();
-    }
-  }
-
   // skip safari bug
   onFileDrop(e: DragEvent): void {
     if (this.options.disabled || e.type === 'dragover') {
@@ -365,6 +356,17 @@ export class NzUploadBtnComponent implements OnInit, OnDestroy {
       fromEvent(this.elementRef.nativeElement, 'click')
         .pipe(takeUntil(this.destroy$))
         .subscribe(() => this.onClick());
+
+      fromEvent<KeyboardEvent>(this.elementRef.nativeElement, 'keydown')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(event => {
+          if (this.options.disabled) {
+            return;
+          }
+          if (event.key === 'Enter' || event.keyCode === ENTER) {
+            this.onClick();
+          }
+        });
     });
   }
 

diff --git a/components/upload/upload.spec.ts b/components/upload/upload.spec.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { ENTER, TAB } from '@angular/cdk/keycodes';
 import { CommonModule } from '@angular/common';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import {
@@ -17,6 +18,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Observable, Observer, of, throwError } from 'rxjs';
 import { delay } from 'rxjs/operators';
 
+import { dispatchKeyboardEvent } from 'ng-zorro-antd/core/testing';
 import { NzI18nModule, NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 import { NzProgressModule } from 'ng-zorro-antd/progress';
@@ -1037,16 +1039,24 @@ describe('upload', () => {
         });
         describe('via onKeyDown', () => {
           it('normal', () => {
+            const appRef = TestBed.inject(ApplicationRef);
+            spyOn(appRef, 'tick');
             spyOn(instance.comp, 'onClick');
             expect(instance.comp.onClick).not.toHaveBeenCalled();
-            instance.comp.onKeyDown({ key: 'Enter' } as any);
+            const uploadBtn = fixture.debugElement.query(By.css('div')).nativeElement;
+            dispatchKeyboardEvent(uploadBtn, 'keydown', ENTER);
             expect(instance.comp.onClick).toHaveBeenCalled();
+            expect(appRef.tick).toHaveBeenCalledTimes(0);
           });
           it('when expect Enter', () => {
+            const appRef = TestBed.inject(ApplicationRef);
+            spyOn(appRef, 'tick');
             spyOn(instance.comp, 'onClick');
             expect(instance.comp.onClick).not.toHaveBeenCalled();
-            instance.comp.onKeyDown({ key: 'A' } as any);
+            const uploadBtn = fixture.debugElement.query(By.css('div')).nativeElement;
+            dispatchKeyboardEvent(uploadBtn, 'keydown', TAB);
             expect(instance.comp.onClick).not.toHaveBeenCalled();
+            expect(appRef.tick).toHaveBeenCalledTimes(0);
           });
         });
         describe('via Drop', () => {