From 823e7e431ca0500cc66b705bda49a4ccd1603718 Mon Sep 17 00:00:00 2001
From: arturovt <arthurandrosovich@gmail.com>
Date: Wed, 27 Jul 2022 00:32:10 +0300
Subject: [PATCH] perf(file): do not run change detection on `click` and
 `keyup` events when the `td-file-input` button is clicked

---
 .../src/file-input/file-input.component.html  |  3 +-
 .../file-input/file-input.component.spec.ts   | 26 ++++++++++++--
 .../src/file-input/file-input.component.ts    | 35 +++++++++++++++++--
 3 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/libs/angular/file/src/file-input/file-input.component.html b/libs/angular/file/src/file-input/file-input.component.html
index 3b65a8a7e..f5b624cf0 100644
--- a/libs/angular/file/src/file-input/file-input.component.html
+++ b/libs/angular/file/src/file-input/file-input.component.html
@@ -1,12 +1,11 @@
 <button
+  #fileInputButton
   mat-raised-button
   class="td-file-input"
   type="button"
   [color]="color"
   [multiple]="multiple"
   [disabled]="disabled"
-  (keyup.enter)="fileInput.click()"
-  (click)="fileInput.click()"
   (fileDrop)="handleSelect($event)"
   tdFileDrop
 >
diff --git a/libs/angular/file/src/file-input/file-input.component.spec.ts b/libs/angular/file/src/file-input/file-input.component.spec.ts
index efc9874ea..884e071d2 100644
--- a/libs/angular/file/src/file-input/file-input.component.spec.ts
+++ b/libs/angular/file/src/file-input/file-input.component.spec.ts
@@ -4,13 +4,14 @@ import {
   waitForAsync,
   ComponentFixture,
 } from '@angular/core/testing';
-import { Component } from '@angular/core';
+import { ApplicationRef, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { ENTER } from '@angular/cdk/keycodes';
+
 import { CovalentFileModule } from '../file.module';
 import { TdFileInputComponent } from '../file-input/file-input.component';
 
-import { By } from '@angular/platform-browser';
-
 describe('Component: FileInput', () => {
   beforeEach(
     waitForAsync(() => {
@@ -132,6 +133,25 @@ describe('Component: FileInput', () => {
     )
   );
 
+  it('should not run change detection when the button is clicked, but should redirect the click to `<input />`', () => {
+    const fixture: ComponentFixture<TdFileInputBasicTestComponent> =
+      TestBed.createComponent(TdFileInputBasicTestComponent);
+    fixture.detectChanges();
+    const appRef = TestBed.inject(ApplicationRef);
+    jest.spyOn(appRef, 'tick');
+    const button: HTMLButtonElement = fixture.debugElement.query(
+      By.css('.td-file-input')
+    ).nativeElement;
+    const input: HTMLInputElement = fixture.debugElement.query(
+      By.css('.td-file-input-hidden')
+    ).nativeElement;
+    jest.spyOn(input, 'click');
+    button.dispatchEvent(new Event('click'));
+    button.dispatchEvent(new KeyboardEvent('keyup', { keyCode: ENTER }));
+    expect(appRef.tick).not.toHaveBeenCalled();
+    expect(input.click).toHaveBeenCalledTimes(2);
+  });
+
   // Todo do we really want to support ng model?
   xit(
     'should mimic file selection event and check model',
diff --git a/libs/angular/file/src/file-input/file-input.component.ts b/libs/angular/file/src/file-input/file-input.component.ts
index a478aa003..c16cfec5b 100644
--- a/libs/angular/file/src/file-input/file-input.component.ts
+++ b/libs/angular/file/src/file-input/file-input.component.ts
@@ -12,10 +12,16 @@ import {
   ViewContainerRef,
   ChangeDetectorRef,
   forwardRef,
+  OnInit,
+  OnDestroy,
+  NgZone,
 } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TemplatePortalDirective } from '@angular/cdk/portal';
+import { ENTER } from '@angular/cdk/keycodes';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { fromEvent, merge, Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 import {
   ICanDisable,
   IControlValueAccessor,
@@ -60,12 +66,17 @@ export const _TdFileInputMixinBase = mixinControlValueAccessor(
 })
 export class TdFileInputComponent
   extends _TdFileInputMixinBase
-  implements IControlValueAccessor, ICanDisable
+  implements OnInit, OnDestroy, IControlValueAccessor, ICanDisable
 {
   private _multiple = false;
 
+  /** The native `<button class="td-file-input"></button>` element */
+  @ViewChild('fileInputButton', { static: true, read: ElementRef })
+  _inputButton!: ElementRef<HTMLElement>;
+
   /** The native `<input type="file"> element */
-  @ViewChild('fileInput', { static: true }) _inputElement!: ElementRef;
+  @ViewChild('fileInput', { static: true })
+  _inputElement!: ElementRef<HTMLInputElement>;
   get inputElement(): HTMLInputElement {
     return this._inputElement.nativeElement;
   }
@@ -104,13 +115,33 @@ export class TdFileInputComponent
     File | FileList
   >();
 
+  private _destroy$ = new Subject<void>();
+
   constructor(
+    private _ngZone: NgZone,
     private _renderer: Renderer2,
     _changeDetectorRef: ChangeDetectorRef
   ) {
     super(_changeDetectorRef);
   }
 
+  ngOnInit(): void {
+    this._ngZone.runOutsideAngular(() => {
+      merge(
+        fromEvent(this._inputButton.nativeElement, 'click'),
+        fromEvent<KeyboardEvent>(this._inputButton.nativeElement, 'keyup').pipe(
+          filter((event) => event.keyCode === ENTER)
+        )
+      )
+        .pipe(takeUntil(this._destroy$))
+        .subscribe(() => this._inputElement.nativeElement.click());
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._destroy$.next();
+  }
+
   /**
    * Method executed when a file is selected.
    */