Adjust input value detachment to avoid input validation in FireFox #11202
Conversation
React DOM intentionally sets `value` on inputs when they are created. This prevents an issue where changes to `defaultValue` cause the `value` property to change. This is colloquially known as "value detachment". Unfortunately, this triggers input validation, displaying a red aura in Firefox. This works around that by: 1. Only detaching if the related value is truthy. 2. Reassigning the `type` property on date/color inputs to preserve the iOS fix.
| // | ||
| // Important: use setAttribute instead of node.type = "x" to avoid | ||
| // an exception in IE10/11 due to an unrecognized input type | ||
| node.setAttribute('type', 'text'); |
There was a problem hiding this comment.
I was under the impression that you can't change the type of an input after it's created in at least some versions of IE. Do you mind double checking which to be sure we don't break something?
There was a problem hiding this comment.
This is definitely true for some browsers for password types, for "security".
There was a problem hiding this comment.
I made a quick test:
https://codepen.io/nhunzaker/full/BwPbRK/
This works in:
- IE 9, 10, 11
- Firefox 47
- Chrome 41
- Safari Desktop 7.0
- Safari iOS 9
Is this a reasonable test case? This page is over HTTPs. I wonder if it would be different otherwise.
In any case, this only applies to date/time/color inputs, and only when they are mounted for the first time.
There was a problem hiding this comment.
Ahh, sorry. Key detail! This fails in IE8, but not IE9 or higher:
There was a problem hiding this comment.
Thanks! I think this should be OK then.
Long-term I suppose someone could make an IE8-compatible renderer using the react-reconciler package if they wanted to.
|
Hmm. I'm hitting the following error trying to run prettier:
I guess there are too many arguments to prettier. Hmm... |
|
🤦♂️ Fixed. Sorry, pushed to the wrong remote 🙄. |
|
This was invalidated by #11746, but the fixture is still important. I'll send a follow-up PR regarding that fixture. |
Fixes #8395
React DOM intentionally sets
valueon inputs when they are created. This prevents an issue where changes todefaultValuecause thevalueproperty to change.This is colloquially known as "value detachment". Unfortunately, this triggers input validation, displaying a red aura in Firefox. This works around that by:
typeproperty on date/color inputs to preservethe iOS fix.
Test Plan
So far, I have tested in:
Success so far:
Safari Desktop 11
Safari iOS 7, 8.4, 10.2, 11
Firefox 47, 56
Chrome 61
IE 10, 11
IE Edge 15