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

Created on 21 Jul 2016 · 21Comments · Source: twbs/bootstrap

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).

browser bug confirmed css v4

Source

rhinoman

Most helpful comment

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 27 Jul 2016

👍5

All 21 comments

Unable to reproduce using latest stable MS Edge 13.10586

cvrebert on 21 Jul 2016

Well, using pure HTML it works.

My problem appears to be some odd interaction between Edge, Bootstrap, and mithril.js: https://jsfiddle.net/6gv9nryc/2

Even IE 11 works. Also worth noting, a plain 'ol file input element works fine.

rhinoman on 21 Jul 2016

Hi @rhinoman!

You appear to have posted a live example (https://fiddle.jshell.net/6gv9nryc/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

JSFiddle inserts the contents of its "HTML" pane within <body>...</body> tags, so you cannot include your own <body> tag in your JSFiddle.
line 80, column 3 thru column 8: Start tag body seen but an element of the same type was already open.
line 93, column 1 thru column 7: Saw an end tag after body had been closed.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

twbs-lmvtfy on 21 Jul 2016

Allright, trying again: https://jsfiddle.net/6gv9nryc/2/

rhinoman on 21 Jul 2016

I can see the behavior you describe on https://jsfiddle.net/6gv9nryc/2/ ... but the problem here seems to be whatever "mithril" is doing. vanilla bootstrap version https://jsfiddle.net/c5s3pL94/2/ works just fine, so i _think_ it's not a bootstrap bug

patrickhlauke on 21 Jul 2016

Very well, in case anyone with the same problem finds their way here, I opened an issue on mithril.js: https://github.com/lhorie/mithril.js/issues/1168

rhinoman on 21 Jul 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 26 Jul 2016

👍3

@barneycarroll interesting. confirming that http://jsbin.com/pogiho/edit?js,output shows the problem in Edge, and that it only happens when you generate the <input> nested inside the <label>. will file a bug with Edge, but (beyond possibly adding something to bootstrap's wall of browser shame) there's little action from our end here.

patrickhlauke on 26 Jul 2016

Well, I've been pretty clear on how Bootstrap could workaround the issue. But I think you're right, you're introducing a lot of pain for an edge case which is down to a vendor implementation bug.

barneycarroll on 26 Jul 2016

Sure, it's just that in vanilla Bootstrap http://v4-alpha.getbootstrap.com/components/forms/#file-browser works just fine since it's static HTML. what triggers the problem is the dynamic creation of the <label><input type="file"></label> ... anyway, I'll have a think, maybe adding a little note with reference to the browser wall of shame and a word of caution for devs that if they dynamically generate this, it may be a world of pain. @cvrebert thoughts?

patrickhlauke on 26 Jul 2016

x-ref https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8282613/

patrickhlauke on 26 Jul 2016

@patrickhlauke It's definitely worth adding that bug to the Wall. Feel free to PR, or I'll do it after work today.

cvrebert on 26 Jul 2016

For the time being I've just implemented a workaround in my app for users on Edge until MS gets around to fixing their stuff. Thanks everyone for looking into this :+1:

rhinoman on 26 Jul 2016

@cvrebert done. not sure if adding an actual note in the docs themselves is needed...thoughts?

patrickhlauke on 27 Jul 2016

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 27 Jul 2016

👍5

@jacobrossi - Thanks for looking at this. The application I'm working on is currently in development, so unfortunately I don't have a live example to point you to at the moment.

rhinoman on 27 Jul 2016

The Edge issue has now been marked as Fixed, presumably in an internal or Preview release. 😄

cvrebert on 13 Sep 2016

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

patrickhlauke on 13 Sep 2016

😄1

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 13 Sep 2016

👍3

I am facing an issue with bootstrap custom file-browser. Please check the screenshot attached.
Verison using Bootstrap v.4 alpha. The cursor blinks on click of filebrowser button.

bootstrap-custom-file