Skip to content

Commit 07c0bc6

Browse files
committed
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.
1 parent 0d53125 commit 07c0bc6

File tree

2 files changed

+33
-1
lines changed

2 files changed

+33
-1
lines changed

src/renderers/dom/client/wrappers/ReactDOMInput.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,11 @@ var ReactDOMInput = {
6767
var value = LinkedValueUtils.getValue(props);
6868
var checked = LinkedValueUtils.getChecked(props);
6969

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, {
7175
defaultChecked: undefined,
7276
defaultValue: undefined,
7377
value: value != null ? value : inst._wrapperState.initialValue,

src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,4 +414,32 @@ describe('ReactDOMInput', function() {
414414
ReactTestUtils.renderIntoDocument(<input type="text" value={null} />);
415415
expect(console.error.argsForCall.length).toBe(1);
416416
});
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+
});
417445
});

0 commit comments

Comments
 (0)