Skip to content

Commit

Permalink
Fix uncontrolled input decimal point "chopping" on number inputs, and…
Browse files Browse the repository at this point in the history
… validation warnings on email inputs (#7750)

* Only assign defaultValue if it has changed.

* Improve comment about reason for defaultValue conditional assignment
  • Loading branch information
nhunzaker authored and aweary committed Oct 13, 2016
1 parent 823dd3d commit 0d20dcf
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 1 deletion.
12 changes: 11 additions & 1 deletion src/renderers/dom/client/wrappers/ReactDOMInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,17 @@ var ReactDOMInput = {
}
} else {
if (props.value == null && props.defaultValue != null) {
node.defaultValue = '' + props.defaultValue;
// In Chrome, assigning defaultValue to certain input types triggers input validation.
// For number inputs, the display value loses trailing decimal points. For email inputs,
// Chrome raises "The specified value <x> is not a valid email address".
//
// Here we check to see if the defaultValue has actually changed, avoiding these problems
// when the user is inputting text
//
// https://github.com/facebook/react/issues/7253
if (node.defaultValue !== '' + props.defaultValue) {
node.defaultValue = '' + props.defaultValue;
}
}
if (props.checked == null && props.defaultChecked != null) {
node.defaultChecked = !!props.defaultChecked;
Expand Down
22 changes: 22 additions & 0 deletions src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,28 @@ describe('ReactDOMInput', () => {
expect(node.value).toBe('0');
});

it('only assigns defaultValue if it changes', () => {
class Test extends React.Component {
render() {
return (<input defaultValue="0" />);
}
}

var component = ReactTestUtils.renderIntoDocument(<Test />);
var node = ReactDOM.findDOMNode(component);

Object.defineProperty(node, 'defaultValue', {
get() {
return '0';
},
set(value) {
throw new Error(`defaultValue was assigned ${value}, but it did not change!`);
},
});

component.forceUpdate();
});

it('should display "true" for `defaultValue` of `true`', () => {
var stub = <input type="text" defaultValue={true} />;
stub = ReactTestUtils.renderIntoDocument(stub);
Expand Down

0 comments on commit 0d20dcf

Please sign in to comment.