Set input .type before .value always
In IE11 (and below), if you run ``` var input = document.createElement('input'); input.value = 'wat'; input.type = 'radio'; console.log(input.value); ``` you get the string "on" logged. Because that makes sense. So we set the type first.
Ben Alpert committed
Dec 23, 2015 at 15:34 UTC
07c0bc6166013fc56edd8310bd97267549e5c708
2 files changed
+33
-1
src/renderers/dom/client/wrappers/ReactDOMInput.js
+5
-1
@@ -67,7 +67,11 @@ var ReactDOMInput = {
67
var value = LinkedValueUtils.getValue(props);
68
var checked = LinkedValueUtils.getChecked(props);
69
70
- var nativeProps = assign({}, props, {
70
+ var nativeProps = assign({
71
+ // Make sure we set .type before any other properties (setting .value
72
+ // before .type means .value is lost in IE11 and below)
73
+ type: undefined,
74
+ }, props, {
75
defaultChecked: undefined,
76
defaultValue: undefined,
77
value: value != null ? value : inst._wrapperState.initialValue,
src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+28
@@ -414,4 +414,32 @@ describe('ReactDOMInput', function() {
414
ReactTestUtils.renderIntoDocument(<input type="text" value={null} />);
415
expect(console.error.argsForCall.length).toBe(1);
416
});
417
+
418
+ it('sets type before value always', function() {
419
+ var log = [];
420
+ var originalCreateElement = document.createElement;
421
+ spyOn(document, 'createElement').andCallFake(function(type) {
422
+ var el = originalCreateElement.apply(this, arguments);
423
+ if (type === 'input') {
424
+ Object.defineProperty(el, 'value', {
425
+ get: function() {},
426
+ set: function() {
427
+ log.push('set value');
428
+ },
429
+ });
430
+ spyOn(el, 'setAttribute').andCallFake(function(name, value) {
431
+ log.push('set ' + name);
432
+ });
433
+ }
434
+ return el;
435
+ });
436
+
437
+ ReactTestUtils.renderIntoDocument(<input value="hi" type="radio" />);
438
+ // Setting value before type does bad things. Make sure we set type first.
439
+ expect(log).toEqual([
440
+ 'set data-reactroot',
441
+ 'set type',
442
+ 'set value',
443
+ ]);
444
+ });
445
});