React: Edge: File input inside a label keeps reopening the file explorer window

[bsonntag]

Do you want to request a _feature_ or report a _bug_?

I want to report a bug.

What is the current behavior?

When using a <input type="file"> inside a <label> on MS Edge, the file explorer window keeps reopening.
When this happens, the only way to close Edge is by killing the process.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).

Place a <input type="file"> inside a <label>, like this:
https://jsfiddle.net/pjccb2rq/

What is the expected behavior?

When the file explorer window is closed, either by selecting a file or by cancelling, the file explorer window should be closed and remain closed.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React version: 15.3.1
Browser: MS Edge
OS: Windows 10

I didn't test previous React versions.

[aweary]

Thanks @bsonntag, I was able to reproduce this on master as well.

[zpao]

That's… strange. We shouldn't be doing anything when you close the dialog there o_O. Can try to repro outside of React? (ideally the same basic set of operations you'd see in React, document.createElement, etc)

[aweary]

@zpao I did try reproducing this without React and I wasn't able to at all. When I tried setting some breakpoints in Edge to look into this it kept crashing. Maybe it's just my VM, but it's definitely strange.

[aweary]

@zpao I realized my test case was incorrect, I am able to reproduce this outside of React.

var root = document.getElementById('root')
var label = document.createElement('label')
var input = document.createElement('input')
input.type = 'file'
label.appendChild(input)
root.appendChild(lable)

So this does seem to be an issue with Edge, not React.

[bsonntag]

I did try this example, that just uses HTML, on the same machine and this one works.
From your example it does seem to be an issue with Edge's document.createElement.

[bsonntag]

I found this on Edge's issues: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8282613/

[aweary]

Thanks for finding that @bsonntag. Since this is not a React issue and it's already been reported I'm going to go ahead and close this out 👍

[zpao]

Thanks for hunting down & confirming that it's an Edge bug!

[DarcyXf]

@zpao @bsonntag Although bsonntag find that on Edge's issues, just like his previous comment, if you only uses HTML (label tag with input tag), it works fine. So what should we explain this?

[DarcyXf]

I met this scene when i use react , it won't appear when you just use pure html.

[bsonntag]

@Darcy-FzR this is a bug in Edge's document.createElement, as you can see in aweary's example.

A workaround for this is to make the label and the input siblings and use the label's for attribute, like this:

function LabeledInput() {
  return <div>
    <label htmlFor='input-id'>Label</label>
    <input id='input-id' type='file' />
  </div>
}

[kaibakker]

@bsonntag for should be htmlFor

https://facebook.github.io/react/docs/dom-elements.html

[bsonntag]

@kaibakker you're absolutely right. I fixed my snippet to help with copy-pasting.

[pjisha]

@bsonntag Thanks. Making label and input as siblings worked for me.