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

Question

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.

Hi. first of all, are you sure your fileInput is populated when you try to attach the eventListener ? It's not undefined ? — millenion
– millenion, Commented Dec 12, 2023 at 1:14
@millenion it works when attaching the event listener directly, so yes. — asgallant
– asgallant, Commented Dec 12, 2023 at 16:14

asgallant · Accepted Answer · 2023-12-12 19:59:22Z

It turns out that the root cause was nested ng-templates. Moving the component out of the templates restores the functionality. I do not have any explanation for why nested templates would cause this issue, however.

msol98 · Accepted Answer · 2023-12-12 07:25:33Z

0

You can change { static: true } to { static: false } so that the element won't be undefined when trying to access and add an event listener.

answered Dec 12, 2023 at 7:25

msol98

5544 silver badges16 bronze badges

2 Comments

asgallant Over a year ago

The manual event listener works. It's the standard angular one that doesn't.

msol98 Over a year ago

@asgallant Would you provide me more explanation please?

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related