Consider a straightforward angular component structured like this:
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {
@Input() testo?: string;
@Output() valueChange = new EventEmitter();
constructor() {
}
ngOnInit(): void {
}
inputChange(event: any) {
this.valueChange.emit(event);
}
ngOnChanges(event: any): void{
console.log(event);
}
ngOnDestroy(event: any): void {
console.log(event);
console.log("Destroy");
}
}
And the structure of the HTML is as follows:
<input #fileInput
id="importFile"
type="file"
style="display: none"
(change)="inputChange($event)" />
<button type="button"
mat-raised-button
color="accent"
(click)="fileInput.click()">
{{this.testo}}
</button>
If a file is selected and confirmed in the file explorer, everything functions correctly. However, if the input window is closed or canceled, there is a brief freeze in Chrome/Mozilla browsers followed by the entire component being destroyed (as indicated by logging).
A major issue arises when the component is within a popup (a component opened as a popup), leading to the destruction of the entire component and subsequent closure of the popup.
In the past, this code worked flawlessly. Interestingly, other applications utilizing input files also experience the "small freeze" issue (some examples can be found on StackBlitz).
Thank you.