Skip to content

Commit ce3ecfb

Browse files
authored
[#9712] fix <input type="number" /> value '.98' should not be equal to '0.98'. (#9714) (#9929)
* [#9712] fix <input type="number" /> value ".98" should not be equal to "0.98". * fix eslint error * fix label error
1 parent 3c89893 commit ce3ecfb

File tree

3 files changed

+56
-2
lines changed

3 files changed

+56
-2
lines changed
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const React = window.React;
2+
3+
import Fixture from '../../Fixture';
4+
5+
class NumberInputDecimal extends React.Component {
6+
state = { value: '.98' };
7+
changeValue = () => {
8+
this.setState({
9+
value: '0.98',
10+
});
11+
}
12+
render() {
13+
const {value} = this.state;
14+
return (
15+
<Fixture>
16+
<div>{this.props.children}</div>
17+
18+
<div className="control-box">
19+
<input
20+
type="number"
21+
value={value}
22+
onChange={(e) => {
23+
this.setState({value: e.target.value});
24+
}}
25+
/>
26+
<button onClick={this.changeValue}>change.98 to 0.98</button>
27+
</div>
28+
</Fixture>
29+
);
30+
}
31+
}
32+
33+
export default NumberInputDecimal;

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -220,8 +220,12 @@ var ReactDOMInput = {
220220
// Simulate `input.valueAsNumber`. IE9 does not support it
221221
var valueAsNumber = parseFloat(node.value, 10) || 0;
222222

223-
// eslint-disable-next-line
224-
if (value != valueAsNumber) {
223+
if (
224+
// eslint-disable-next-line
225+
value != valueAsNumber ||
226+
// eslint-disable-next-line
227+
(value == valueAsNumber && node.value != value)
228+
) {
225229
// Cast `value` to a string to ensure the value is set correctly. While
226230
// browsers typically do this as necessary, jsdom doesn't.
227231
node.value = '' + value;

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,23 @@ describe('ReactDOMInput', () => {
8686
});
8787
});
8888

89+
it('does change the string ".98" to "0.98" with no change handler', () => {
90+
class Stub extends React.Component {
91+
state = {
92+
value: '.98',
93+
};
94+
render() {
95+
return <input type="number" value={this.state.value} />;
96+
}
97+
}
98+
99+
var stub = ReactTestUtils.renderIntoDocument(<Stub />);
100+
var node = ReactDOM.findDOMNode(stub);
101+
stub.setState({value: '0.98'});
102+
103+
expect(node.value).toEqual('0.98');
104+
});
105+
89106
it('should display `defaultValue` of number 0', () => {
90107
var stub = <input type="text" defaultValue={0} />;
91108
stub = ReactTestUtils.renderIntoDocument(stub);

0 commit comments

Comments
 (0)