Disabling or destroying event's target stops further event propagation. #9046
Description
Disabling a submit button within a form on onClick, stops the event propagation to the forms onSubmit handler.
The fiddle:
import React from "react";
class SomeForm extends React.Component {
constructor(props){
super(props)
this.state = {
disabled:false
}
}
handleClick() {
this.setState({
disabled:true
});
console.log("Clicked button");
}
handleSubmit(e){
alert("Submitted the form")
}
render() {
let opts = {};
opts.disabled = this.state.disabled; // disabling the button stops the event propagation
return (<form onSubmit={this.handleSubmit.bind(this)}>
<button {...opts}
type="submit"
onClick={this.handleClick.bind(this)}>
Continue
</button>
</form>)
}
}
ReactDOM.render(<SomeForm />, document.getElementById('a'));
Expected behavior: The event gets propagated unless explicitly swallowed via e.preventDefault() && e.stopPropagation()
React version: 15.4.2
Browser: Chrome 56.0.2924.87 x64
Unfortunately I cannot tell if this happens with older versions.