Form onChange returns two objects instead of only value

Expected Behavior

<Form onSubmit={({value}) => this.save(value)}
            onChange={(value) => console.log(value)}
            value={value}
>

onChange should log the content of value, that is the changed form values object.

Actual Behavior

onChange seems to be called twice, first time with an event object and second time with the actual value object.

URL, screen shot, or Codepen exhibiting the issue

Reproduced here:

https://codesandbox.io/s/grommet-v2-template-slom4

Steps to Reproduce

1. Create a Form
2. Add an onChange prop
3. log value

Your Environment

• Grommet version: 2.7.8
• Browser Name and version: Firefox Quantum 69
• Operating System and version (desktop or mobile): MacOS Mojave 10.14.6

[britt6612]

There has been many changes to form in the past few months

I created an updated codesandbox to show that onChange is now just called once.

https://codesandbox.io/s/onchange-form-1efo4?file=/src/App.js

If there are no objections I believe this issue can be closed. The Grommet 2.11.0 release with the massive improvements to form and formfield this issue was no longer happening

[maslennikov]

I confirm with Chrome (ver 79 - latest for the time being) on Mac. Looks like some keypress event is leaking from TextInput (both as regular form field children, and nested deeper inside other form components (like search input inside a select).

For example, within a searchable select, normal click upon an option from the list will trigger only a valid Form.onChange event. But after any key press inside of the search field it will trigger two successive Form.onChange invocations (first - with a keypress event passed as a param, second - with a valid Form.onChange param).

Also, local onChange() callbacks passed to FormField components won’t catch this buggy event, it happens only with Form.onChange.

As a local fix, now I have handlers in such fashion:

<Form
   onChange={v => {v.preventDefault || setChanges(v)}}
  ...
>