ios – What could cause a change event not to fire in angular, when an equivalent DOM event listener does?


I have an angular application with a component with a file input like so:

<input #fileInput type="file" (change)="uploadFile($event)" />

The component is shared across multiple parts of the application. In almost all circumstances, this works exactly as expected. However, on one page of my application when using the app in an iframe in a WkWebView in the Salesforce iOS app, the change event does not fire if the user goes through the iOS “Take Photo or Video” workflow that is part of the iOS implementation of file inputs. Other pages in the application can use the input just fine; other iOS apps can iframe the site and use this page just fine; using an option other than “Take Photo or Video” works just fine.

What is extra strange, is that if I attach a change event to the element natively, bypassing Angular, it works just fine:

@ViewChild('fileInput', { static: true }) fileInput: ElementRef;

ngAfterViewInit() {
  this.fileInput.nativeElement.addEventListener('change', this.uploadFile);
}

Something about this extremely narrowly specific confluence of factors causes the bug. After days of pouring over this and trying to locate the root cause, I am out of ideas. What might plausibly interfere with a change event firing?

Incidentally, I have tried the tricks to null out the input value, as suggested in answers like this one. It does not help here.

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img