Remount ReactDOMInput when changing type

[syranide]

IE8 throws if you change input type, It applies to all values of type (even unsupported ones).

React.renderComponent(<input type="radio" />, document.body);
React.renderComponent(<input type="checkbox" />, document.body);
[ERROR for attribute]  Could not get the type property. This command is not supported.
[ERROR for property]  "This command is not supported."

Additionally, all other versions of IE does not respect checked unless type="checkbox" or type="radio". So changing from type="textfield" to type="checkbox" while checked causes it to be unchecked. Which should be an issue for React, except that ReactDOMInput explicitly calls DOMPropertyOperations.setValueForProperty for every componentDidUpdate (source link). Why? Seems wasteful.

It seems to me that the correct solution (to all of this) is to consider a different type as a different component. type is a really weird HTML feature, which to me is akin to transforming span into div rather than remounting... which we don't.

cc @zpao @spicyj

(PS. PR just because, not saying we should take it as-is)

[zmsmith]

I just ran into this bug working through an placeholder implementation for IE8. The workaround we came up with is to set a different key depending on the type of the input in order to signal to redraw the entire component when the type changes.

[sophiebits]

Accepted – @syranide feel free to merge after we branch for 0.13.

[syranide]

@spicyj Hmm, I made getActualType return '' instead of 'text'. It works with 'text' currently in IE8 as it is mutated as a property. But #1510 will introduce removeAttribute for properties, so it would throw in IE8 when removing the property. Additionally, toggling between <input /> and <input type="text" /> seems incredibly rare and would also toggle the attribute in the DOM, while ultimately kind of irrelevant it seems preferable to treat type(null) !== type('text') for technical reasons and hopefully the user will be made aware of the unintentional toggling (hmm, perhaps a warning could make sense if really feel like it?).

Sounds good?

[sophiebits]

Yeah, okay.

[sophiebits]

This no longer works with the new implementation of ReactDOMInput. :\

[gaearon]

This no longer merges cleanly and has been stale for a few months so I am closing. Additionally, we no longer support IE8 officially in React 15, so bug fixes to it have a much lower priority now.