Demo:
http://codepen.io/anon/pen/LxpyLB
Problem:
<input type=number> resets its value when I type "." instead of default behaviour (trigger input::invalid html5 state).
Source code if demo not available:
<!-- demo.html -->
<p><b>Bug:</b></p>
<div id="test"></div>
<p><b>Normal html5 behavior:</b></p>
<div>
<input type="number" value="20" /><br/>
<input type="number" />
</div>
/* demo.css */
input:invalid {
outline: 1px solid red;
}// demo.js
class Test extends React.Component {
public state = {value: 11};
render(){
return (
<div>
<p>1:
<input type="number" defaultValue="10"/>
<input type="number" value={this.state.value} onChange={e => this.setState({value: e.target.value})}/>
fully resets value when type "."</p>
<p>2: <input type="number"/> allows to type "." and hightlight invalid field</p>
</div>
)
}
}
ReactDOM.render(<Test/>, document.querySelector('#test'))
Demo:
http://codepen.io/anon/pen/LxpyLB
Problem:
<input type=number>resets its value when I type "." instead of default behaviour (trigger input::invalid html5 state).Source code if demo not available: