Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Form onChange returns two objects instead of only value

See original GitHub issue

Expected Behavior

<Form onSubmit={({value}) =>}
            onChange={(value) => console.log(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

Screenshot 2019-09-18 at 12 31 44

Reproduced here:

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

britt6612commented, Jul 28, 2020

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.

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

maslennikovcommented, Dec 20, 2019

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:

   onChange={v => {v.preventDefault || setChanges(v)}}
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Handle Multiple Inputs with a Single onChange ...
Besides handling just one input, a single onChange handler can be set up to handle many different inputs in the form.
Read more >
Why does my onChange event for input change multiple state ...
I would expect that when I change an input value for one stat for a given player, it only changes the stat value...
Read more >
SCR19: Using an onchange event on a select element ... - W3C
Navigate to the trigger select element, navigate through the options but do not change the value. Check that the matching option values are...
Read more >
Controller | React Hook Form - Simple React forms validation
Provides onChange , onBlur , name , ref and value to the child component, and also a fieldState object which contains specific input...
Read more >
input file'' onchange react - Industry Today
target.value = null. To get an in-depth understanding of the issue, check out this helpful blog post. Because the form name props match...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found