[#9712] fix <input type="number" /> value '.98' should not be equal to '0.98'. (#9714)

* [#9712] fix <input type="number" /> value ".98" should not be equal to "0.98".

* fix eslint error

* fix label error

Author: pingan1927

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 (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <input
+            type="number"
+            value={value}
+            onChange={(e) => {
+             this.setState({value: e.target.value}); 
+            }}
+          />
+          <button onClick={this.changeValue}>change.98 to 0.98</button>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default NumberInputDecimal;

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() {
         </TestCase.ExpectedResult>
         <NumberTestCase />
       </TestCase>
+      <TestCase
+          title="Decimal numbers"
+          description="eg: initial value is '.98', when format to '0.98', should change to '0.98' "
+      >
+        <TestCase.Steps>
+          <li>initial value is '.98'</li>
+          <li>setState to '0.98'</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          the input value should be '0.98'.
+        </TestCase.ExpectedResult>
+        <NumberInputDecimal />
+      </TestCase>
     </FixtureSet>
   );
 }

scripts/fiber/tests-passing.txt

@@ -1524,6 +1524,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`

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) || 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;

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 <input type="number" value={this.state.value} />;
+      }
+    }
+
+    var stub = ReactTestUtils.renderIntoDocument(<Stub />);
+    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 = <input type="text" defaultValue={0} />;
     stub = ReactTestUtils.renderIntoDocument(stub);

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;