<input type="file"> fails to show and displays inappropriate file types

• Component: Forms
• Status: NEW ---

[goldwaving]

First issue:
Using the following code, when the Open button is clicked the file picker window does not appear.  It does appear on Chrome and Firefox.  This kind of deferred display is necessary for multi-threaded web apps.  A webworker may be sending a message to display the file picker.  However Safari does not show it presumable because the original click event is not considered in this context.


<input id="file" style="display:none" type="file" accept=".m4a,.mp3,.wav,.ogg,audio/*">
<button onclick="show=true">Open</button>

<script>
const file = document.getElementById( 'file' );
var show = false;

setInterval( () => { if ( show ) { show = false; file.click(); } }, 200 );
</script>

Second issue:
When displaying the file picker on iOS, it always displays a popup for "Photo Library", "Take Video", and "Choose File" even when "accept" does not specify images or video.  This is a very inappropriate and unnecessary popup when an app is accepting only audio files, only PDF files, etc.

Third issue:
On iOS there is no change in focus when the popup or file picker appears.  Many developers rely on focus changes to determine if the file picker was cancelled (because there is no cancel event in the specification).

[Radar WebKit Bug Importer]

<rdar://problem/86959342>

[goldwaving]

This design flaw also affects AudioContext, navigator.share, uploading/downloading as well.  Rather than using a timed based method (such as https://html.spec.whatwg.org/multipage/interaction.html#sticky-activation) webkit wrongly uses a context based method.  Firefox and Chrome do not have such a short sighted, inflexible design.