File input doesn't trigger "change" event in options UI on Android

In my options_ui page for my add-on, I have a file input:

<input type="file" accept="application/json" id="importpicker">

And in the JavaScript I have an event listener for “change”:

document.addEventListener('change', event => {
    if (event.target.id == "importpicker") {
        validateImportButton();
    } else {
        changeSetting(event);
    }
});

This works just fine when testing on Windows, but for some reason when selecting a file on Android, the event is not triggered.

I tried using a focus event which does get triggered after selecting the file, but the
importPicker.files.length is 0 so the file is not being selected back into Firefox.

const importPicker = document.getElementById('importpicker');
// Start watching when user taps input
importPicker.addEventListener('click', () => {
    awaitingFile = true;
});

// When coming back from file picker
window.addEventListener('focus', () => {
    if (awaitingFile) {
        awaitingFile = false;
        if (importPicker.files.length > 0) {
            validateImportButton();
        }
    }
});

Does anyone have any ideas? I could’ve sworn I tested the file input on Android when I added the functionality over a year ago, so I don’t know if there is some regression in Firefox causing this issue or if it just never worked. Is anyone else using a file input in their add-on’s option UI?

Ok, this is looking like a bug in Firefox Android. I changed my option UI to open in a new tab (“open_in_tab”: true) and it works. There is something wrong with the options_ui popup/options page.

1 Like

Thanks for opening bug 1962923!