Mithril.js: Strange behavior when using Bootstrap v4 file picker and MS Edge browser

[rhinoman]

Description:

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

Plain HTML example from Bootstrap documentation:

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

Works in FF, Chrome, and even IE 11 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. Note: A plain html file picker works fine.

Steps to Reproduce:

https://jsfiddle.net/6gv9nryc/2

var MainThing = {
  controller: function(opts){

  },
  view: function(ctrl, opts){
    return m("form", [
      m("label", {class: "file"},
        m("input", {type: "file"}),
        m("span", {class: "file-custom"})
      )
    ])
  }
}

m.mount(document.getElementById("main"), MainThing);

Expected:

Choose a file, dialog closes, move on with life.

Actual:

Pain. I have to kill MS Edge in the Task Manager to make it stop.

REF: https://github.com/twbs/bootstrap/issues/20335

[patrickhlauke]

In fact, it seems that even once you remove bootstrap and jquery from the equation, the problem still persists...so it's definitely a mithril problem with Edge https://jsfiddle.net/szer6gub/5/

[isiahmeadows]

Could you verify if it works with the current next bundle?

[rhinoman]

seeing the same behavior with the current mithril.js on the next branch

[rhinoman]

It gets even more fun: I've found it works correctly when stepping through with the debugger in Edge :(

[isiahmeadows]

@lhorie Could you take a look at this? I don't have easy access to Edge, so I can't help much, but it sounds like a possible Edge bug that needs a workaround.

[barneycarroll]

I've managed to reduce this bug down to a dynamically created file input inside a label. It's not Mithril, it's just MS Edge. I remember facing similar with ancient IEs. My advice would be to keep the input out of the label and use id and for.

Bootstrap would need to change their implementation though, because it relies on a procedural repeatable code snippet without unique IDs, and the CSS works on the assumption that ::before and ::after pseudo-elements on the label and span will be sequentially before and after the input.

[patrickhlauke]

for reference, filed https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8282613/

[rhinoman]

Ok, not a mithril bug. Guess I'll close this. Thanks all :)