FF Dispatch event bug

ff unexpected behaviour

HTML

<div id="app"></div>

React

class App extends React.Component {
  constructor(props) {
    super(props)
    console.log("__ APP CONSTRUCTOR _____________")
    this.type = "sign_in"
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleClick = this.handleClick.bind(this)
  }
  
  handleSubmit(data) {
  	console.log(data)
  }
  
  handleClick(evt, type) {
  	evt.preventDefault()
    this.type = type
    this.form.submit()
  }
  
  render() {
    return (
      <div>
        <Form onSubmit={this.handleSubmit} ref={r => this.form = r}>
          <input type="text" placeholder="login" name="login" required />
          <input type="password" placeholder="password" name="password" required />
          <div className="actions">
            <button type="button" onClick={evt => this.handleClick(evt, "sign_up")}>sign_up</button>
            <button onClick={evt => this.handleClick(evt, "sign_in")}>sign_in</button>
          </div>
        </Form>
      </div>
    )
  }
}

class Form extends React.Component {
	handleSubmit(evt) {
		evt.preventDefault()
    evt.stopPropagation()
    evt.nativeEvent.stopImmediatePropagation()
    
    var data = {}
		for (var i = 0; i < this.form.elements.length; i++) {
		var elt = this.form.elements[i]
      if (elt.name) {
        data[elt.name] = elt.value
      }
		}
    
    this.props.onSubmit(data)
    return false
	}
  
  submit() {
  	if (this.form.checkValidity())
    	this.form.dispatchEvent(new Event('submit'))
  }
  
	render() {
  	return (
    	<form onSubmit={this.handleSubmit.bind(this)} ref={r => this.form = r}>
    	  {this.props.children}
    	</form>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))