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 @@ ` element */ + @ViewChild('fileInputButton', { static: true, read: ElementRef }) + _inputButton!: ElementRef; + /** The native ` element */ - @ViewChild('fileInput', { static: true }) _inputElement!: ElementRef; + @ViewChild('fileInput', { static: true }) + _inputElement!: ElementRef; get inputElement(): HTMLInputElement { return this._inputElement.nativeElement; } @@ -104,13 +115,33 @@ export class TdFileInputComponent File | FileList >(); + private _destroy$ = new Subject(); + constructor( + private _ngZone: NgZone, private _renderer: Renderer2, _changeDetectorRef: ChangeDetectorRef ) { super(_changeDetectorRef); } + ngOnInit(): void { + this._ngZone.runOutsideAngular(() => { + merge( + fromEvent(this._inputButton.nativeElement, 'click'), + fromEvent(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. */