diff --git a/fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js b/fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js new file mode 100644 index 0000000000000..552deb04d7d42 --- /dev/null +++ b/fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js @@ -0,0 +1,33 @@ +const React = window.React; + +import Fixture from '../../Fixture'; + +class NumberInputDecimal extends React.Component { + state = { value: '.98' }; + changeValue = () => { + this.setState({ + value: '0.98', + }); + } + render() { + const {value} = this.state; + return ( + +
{this.props.children}
+ +
+ { + this.setState({value: e.target.value}); + }} + /> + +
+
+ ); + } +} + +export default NumberInputDecimal; diff --git a/fixtures/dom/src/components/fixtures/number-inputs/index.js b/fixtures/dom/src/components/fixtures/number-inputs/index.js index 7900bd8594345..7e08aa22024c3 100644 --- a/fixtures/dom/src/components/fixtures/number-inputs/index.js +++ b/fixtures/dom/src/components/fixtures/number-inputs/index.js @@ -3,6 +3,7 @@ const React = window.React; import FixtureSet from '../../FixtureSet'; import TestCase from '../../TestCase'; import NumberTestCase from './NumberTestCase'; +import NumberInputDecimal from './NumberInputDecimal'; function NumberInputs() { return ( @@ -158,6 +159,20 @@ function NumberInputs() { + + +
  • initial value is '.98'
  • +
  • setState to '0.98'
  • +
    + + + the input value should be '0.98'. + + +
    ); } diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index 2a5bbf480ec2b..90f7fe918c10c 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -1477,6 +1477,7 @@ src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js * does change the number 2 to "2.0" with no change handler * does change the string "2" to "2.0" with no change handler * changes the number 2 to "2.0" using a change handler +* does change the string ".98" to "0.98" with no change handler * should display `defaultValue` of number 0 * only assigns defaultValue if it changes * should display "true" for `defaultValue` of `true` diff --git a/src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js b/src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js index 41de9687e429d..7f7e002b1aab3 100644 --- a/src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js +++ b/src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js @@ -203,8 +203,12 @@ var ReactDOMInput = { // Simulate `input.valueAsNumber`. IE9 does not support it var valueAsNumber = parseFloat(node.value, 10) || 0; - // eslint-disable-next-line - if (value != valueAsNumber) { + if ( + // eslint-disable-next-line + value != valueAsNumber || + // eslint-disable-next-line + (value == valueAsNumber && node.value != value) + ) { // Cast `value` to a string to ensure the value is set correctly. While // browsers typically do this as necessary, jsdom doesn't. node.value = '' + value; diff --git a/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js index 19a38b9e182f5..07cc19213c44a 100644 --- a/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js +++ b/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js @@ -233,6 +233,23 @@ describe('ReactDOMInput', () => { }); }); + it('does change the string ".98" to "0.98" with no change handler', () => { + class Stub extends React.Component { + state = { + value: '.98', + }; + render() { + return ; + } + } + + var stub = ReactTestUtils.renderIntoDocument(); + var node = ReactDOM.findDOMNode(stub); + stub.setState({value: '0.98'}); + + expect(node.value).toEqual('0.98'); + }); + it('should display `defaultValue` of number 0', () => { var stub = ; stub = ReactTestUtils.renderIntoDocument(stub); diff --git a/src/renderers/dom/stack/client/wrappers/ReactDOMInput.js b/src/renderers/dom/stack/client/wrappers/ReactDOMInput.js index b05ca82b352db..368d577b61f0f 100644 --- a/src/renderers/dom/stack/client/wrappers/ReactDOMInput.js +++ b/src/renderers/dom/stack/client/wrappers/ReactDOMInput.js @@ -195,8 +195,12 @@ var ReactDOMInput = { // Simulate `input.valueAsNumber`. IE9 does not support it var valueAsNumber = parseFloat(node.value, 10) || 0; - // eslint-disable-next-line - if (value != valueAsNumber) { + if ( + // eslint-disable-next-line + value != valueAsNumber || + // eslint-disable-next-line + (value == valueAsNumber && node.value != value) + ) { // Cast `value` to a string to ensure the value is set correctly. While // browsers typically do this as necessary, jsdom doesn't. node.value = '' + value;