bootstrap: Filepicker window infinitely reopens after opening custom file input in MS Edge

Attempting to use the Bootstrap custom file input with MS Edge on Windows 10 (using Bootstrap v4-alpha2):

<label class="file">
  <input type="file" id="file">
  <span class="file-custom"></span>
</label>

Works well enough in other browsers I’ve tried (FF, Chrome, Vivaldi), but in MS Edge clicking the “Browse” button opens up a Windows file dialog that cannot be dismissed. Selecting a file or canceling the dialog results in the dialog closing and then reopening (ad infinitum).

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 21 (6 by maintainers)

Commits related to this issue

Remove fixed Edge <input type="file"> bug from the Wall https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8282613/ has been marked as Fixed. Refs #20335. [skip sauce] — committed to twbs-savage/bootstrap by cvrebert 8 years ago

Most upvoted comments

Microsoft engineer here. Thanks for the report – I passed it on to our forms input team to take a look.

For additional context and to help prioritize, is there a live site (not a demo repro page) that this is affecting or did you just find this in development?

jacobrossi on Jul 26, 2016

Heh. Yep. Thanks @patrickhlauke

FYI - this is fixed in internal builds. This should get pushed out in the next Preview Build (relatively soon, typically every 1-2 weeks).

jacobrossi on Sep 13, 2016

Cross-posting this from the Mithril issue. It’s not Mithril, it’s MS Edge/IE. Up to Boostrap whether they want to consider this edge case worthy of introducing extra implementation costs. The bug is reproducible when a label containing an file input is constructed dynamically. To be specific:

<label>
  <input type="file"/>
</label>

I remember facing this issue many years ago with old IE. Using corresponding for attribute and id property to work around the issue:

<label for="inputID"></label>
<input id="inputID" type="file"/>
<label for="inputID"></label>

This adds usage complexity, since authors need to take care to create new unique IDs for each instance. The question is whether Bootstrap users are prepared to swallow the cost of more involved instructions to accommodate the scenario of dynamic DOM insertion & IE users.

For reference, here’s the minimal reduced test case for the bug (no Bootstrap, no Mithril, tested on latest Edge 14): http://jsbin.com/pogiho/edit?js,output

…and here’s @rhinoman’s original fiddle, forked to accommodate the Edge bug, with broken Bootstrap styling: https://jsfiddle.net/barney/ec628m2v/

barneycarroll on Jul 26, 2016

related…somebody needs to html-encode their html-based emails https://twitter.com/patrick_h_lauke/status/774309410982297600 😉

patrickhlauke on Sep 13, 2016