<select> element with default option fails validation

Confirmed Issue #8794503 • Assigned to Bogdan B.

Details

Author
Nolan L.
Created
Sep 7, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 8 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Go to the JSFiddle: https://jsfiddle.net/hhgo0y9n/18/
  2. Click “submit” (misspelled as “sumbit”)

Expected result: no validation errors
Actual result: validation error, “You must choose an item from the list”

Difficult to tell what’s going on under the hood, but seems that React isn’t actually setting a value attribute on the <select> but is rather setting it in some other way that breaks Edge.

Confirmed working in Firefox 48 and Chrome 52, not working in Edge 14.

Attachments

0 attachments

    Comments and activity

    • From what I can see the react logic for updating the selected option happens here - https://github.com/facebook/react/blob/7b2d9655da218f8311d1dab4ab1142c35c3eef3b/src/renderers/dom/client/wrappers/ReactDOMSelect.js#L101-L130

      Setting el.options[n].selected to true

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

      Changed Assigned To to “Bogdan B.”

      Changed Status to “Confirmed”

    • Hello. Any word on this? This is also affecting my work’s Ember application, travis-web, which uses an addon called emberx-select to generate dynamic select fields.

      I modified the JSFiddle to show a workaround: you can change the select’s value with Javascript and then change it back to the default value, which will make the validation error disappear.

      I forked emberx-select to add that workaround but it seems quite unsightly to me and I’d love if Edge could better handle this.

      Or if anyone has alternate solutions to suggest, I’m happy to hear them.

    You need to sign in to your Microsoft account to add a comment.

    Sign in