Form: using a third-party form library causes "Uncaught TypeError: e.preventDefault is not a function"

[darkadept]

Using React Formal (https://github.com/jquense/react-formal) library and Semantic UI React together causes an error on form submission.

(This bug has been fixed in a PR, see bottom of this post)

Steps

I use the two library together like this:

import {default as Formal} from 'react-formal'; //They both have a component called <Form>
import {Form, Button} from 'semantic-ui-react';

class Thing extends Component {
  handleSubmit = (data) => {
  }

  render() {
    return {
      <Form
        as={Formal}
        schema={mySchema}
        onSubmit={this.handleSubmit}
      >
        // fields here...
        <button type="submit">Submit</button>
      </Form>
    }
  }
}

When I click on the button to submit the form it gives an error.

Expected Result

The form should be submitted.

Actual Result

I receive the following error on the console:

Uncaught TypeError: e.preventDefault is not a function

Version

Semantic UI React 0.69.0

A PR (#1788) has already been submitted that fixes this problem. A comment there requested an issue for a line comment. This is the issue.