React: IE Edge: required select boxes with value set on initial render failing validation on submit.

Created on 3 Sep 2016 · 10Comments · Source: facebook/react

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

bug

What is the current behavior?

In IE Edge when rendering a required select box with an initial value set, when trying to submit the form the input will fail validation saying "You must choose an item from the list".

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

Visit https://jsfiddle.net/hhgo0y9n/18/ in IE Edge.
Try to submit form.

What is the expected behavior?

The form should be valid and submit correctly.

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

Browser: IE Edge (v38 as of testing).
React versions: 15 to master (7b247f3609ad25d79ae267b4b5c919a35da45cb4).

Works in React 0.14.8.

Notes

I believe this might be a browser bug but the issue does not occur in React 0.14, perhaps using different apis?

Most helpful comment

Temporary hack in our select component to get around the issue for now:

componentDidMount() {
  const selectedIndex = this.element.selectedIndex;

  if (this.element && selectedIndex >= 0) {
    const options = this.element.options;  
    const tempIndex = (selectedIndex + 1) % options.length;

    options[tempIndex].selected = true;
    options[selectedIndex].selected = true;    
  }
}

tappleby on 8 Sep 2016

👍5

All 10 comments

Looks like a bug in IE/Edge. I filed it here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8794503/

nolanlawson on 7 Sep 2016

Temporary hack in our select component to get around the issue for now:

componentDidMount() {
  const selectedIndex = this.element.selectedIndex;

  if (this.element && selectedIndex >= 0) {
    const options = this.element.options;  
    const tempIndex = (selectedIndex + 1) % options.length;

    options[tempIndex].selected = true;
    options[selectedIndex].selected = true;    
  }
}

tappleby on 8 Sep 2016

👍5

cc @csuwildcat

jimfb on 8 Sep 2016

Slight update to @tappleby's patch below. The original didn't work if the select only contained a single option. The below code detects that case and temporarily adds an additional option element, runs the option toggle to fix the edge bug, then remove the transient option.

componentDidMount () {
    let selectedIndex = -1;
    if (this.refs.select) {
        selectedIndex = this.refs.select.selectedIndex;
    }

    if (selectedIndex >= 0) {
        const inputDOM = ReactDOM.findDOMNode(this.refs.select);

        let tempOption;
        if (inputDOM.childNodes.length === 1) {
            tempOption = document.createElement('option');
            inputDOM.appendChild(tempOption);
        }

        const options = this.refs.select.options;
        const tempIndex = (selectedIndex + 1) % options.length;
        options[tempIndex].selected = true;
        options[selectedIndex].selected = true;

        if (tempOption) {
            inputDOM.removeChild(tempOption);
        }
    }
}

crgwbr on 23 Sep 2016

I created a simple vanilla JS repro here. The code is:

var form = document.getElementById('form');
form.addEventListener('submit', e => e.preventDefault());

var select = document.createElement('select');
select.required = true;

var option1 = document.createElement('option');
option1.value = 1;
option1.text = 'one';
option1.selected = true;

form.appendChild(select);
select.appendChild(option1); // appending an option after the select is the problem

Swapping it to

select.appendChild(option1);
form.appendChild(select);

avoids the issue.

jdalton on 15 Nov 2016

Swapping it to

select.appendChild(option1);
form.appendChild(select);

Is this related to the insertion order juggle React does for IE/Edge perf?

jdalton on 31 Mar 2017

Hi, In IE Edge when rendering a required select box with an initial value set, when trying to submit the form the input getting fail validation. The Select value coming in invalid in IE edge. Any solution?

https://codepen.io/anon/pen/JyzLMx?editors=0010