Events triggered on multiple forms on the same page

Hi,

I have two forms in the same react component, and the onChange event in both forms are triggered when I change one of the forms. Here is the code:

import { Form } from 'react-formio'

const form1 = {
  components: [
    {
      label: 'Input1',
      type: 'textfield',
      input: true,
      key: 'input1',
    },
  ],
  display: 'form',
  page: 0
}
const form2 = {
  components: [
    {
      label: 'Input2',
      type: 'textfield',
      input: true,
      key: 'input2',
    },
  ],
  display: 'form',
  page: 0
}
class Container extends Component {
  constructor(props) {
    super(props)
  }

  onChange(event, id) {
    console.log('onChange', id)
  }
  render() {
    return (
      <div>
        <Form key='1' form={form1} onChange={(event) => this.onChange(event, '1')} />
        <Form key='2' form={form2} onChange={(event) => this.onChange(event, '2')} />
      </div>
    )
  }
}

export default Container

When I change “input1”, I am expecting to see only one event is triggered, however, two events are triggered and console prints out:

onChange 1
onChange 2

Why is the event for form 2 triggered? I also experience the same issue with the onSubmit event.

[iobuhov]

Fix shared EventEmitter

[ybo]

Thanks! Can you please link the commit or PR to this issue? I would like to know the fix.