Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

event.preventDefault is not a function in onChange(event, value, previousValue, name) #4548

Open
tohbansoon opened this issue Oct 4, 2019 · 12 comments · May be fixed by #4604
Open

event.preventDefault is not a function in onChange(event, value, previousValue, name) #4548

tohbansoon opened this issue Oct 4, 2019 · 12 comments · May be fixed by #4604

Comments

@tohbansoon
Copy link

after upgrade react-redux to version 7.1.1 and redux-form to version 8.2.6...
i found that preventDefault object is missing from the event params...

Here is my code...

<Field
     component={ReduxFormRadioGroup}
     formItemProps={{ className: 'operation-hours__option-container' }}
     label='Hours of Operation'
     name='operationHoursCategory'
     onChange={this.handleCategoryChange}
/>

handleDisabledDayChange = (event, value, previousValue, name) => {
        console.log(event, value, previousValue, name)
        event.preventDefault()
        ...
        .......
}

in "redux-form": "^7.2.0" and "react-redux": "^5.0.7":
console.log(event) can see the preventDefault: ƒ preventDefault()

in redux-form": "^8.2.6" and "react-redux": "^7.1.1":
console.log(event) do not have preventDefault: ƒ preventDefault()

this in result event.preventDefault() is not a function and break the application!
@iamandrewluca
Copy link
Member

@tohbansoon Can you please create a https://codesandbox.io that will replicate the problem?

@mateioprea
Copy link

@iamandrewluca https://codesandbox.io/s/broken-wave-zqz0k?fontsize=14 here it is. I just got the same problem. It doesn't work with react-select

@toxsick
Copy link

toxsick commented Oct 22, 2019

Hey guys,

having the same problem. I think this behaviour was introdured here:

#3446

This leads to inconsistent onChange bahaviour on Fields, because I have to know if my render component supports events or not. Not sure how to handle this consistently.

@toxsick
Copy link

toxsick commented Oct 31, 2019

@mateioprea thanks for the sandbox, it illustrates the problem very well.

@iamandrewluca do you have insights on this. I have a pretty form heavy application and this change breaks them all over the place. Any suggestion on how to change this?

@mateioprea
Copy link

@toxsick I have removed the breaking change from #3446. If you want, you can npm install --save https://github.com/mateioprea/redux-form :)

@toxsick
Copy link

toxsick commented Oct 31, 2019

@mateioprea that's a good start and I will try that later :) Thanks for that!

Would be nice to know if there is a migration path with the official release. I'm also don't understand how to stop the propagation to the store when no event is present.

@Iuriy-Budnikov
Copy link

Iuriy-Budnikov commented Feb 4, 2020 •
edited

I have the same issue. After switch to the 8.^.^ event it's a value not event.

@renatoagds
Copy link
Contributor

@Iuriy-Budnikov what's your version? could you confirm if 8.3.0 didn't fixed this problem? We released a fix in change: #4596

@Iuriy-Budnikov
Copy link

@renatoagds here an example with react select https://codesandbox.io/s/strange-glitter-j3ipz
It works with simple input

@dereksandkamp
Copy link

8.3.0 did not fix the problem for me.

For many of my inputs, I'm calling input.onChange(value) with the value of the input as the argument. These are the inputs that cause the problem. When an onChange is passed to the <Field /> from above these inputs, the first argument injected into the Field's onChange is the value, not the event. Then there is no way to cancel the change event.

It is possible to fix this by updating my inputs to call input.onChange(event) with the event instead of the value as the first argument. Then any Field.onChange handlers will receive the event. However, this isn't ideal for some inputs because the value that is attached to the change event is not always the value that I would like to propagate.

There are likely ways to work around this, but it seems like this wasn't an intended change. Or if it was, the documentation should at least make it clear that in order to receive the event in the Field.onchange handler, you need to pass an event to input.onChange from within the input.

dereksandkamp pushed a commit to dereksandkamp/redux-form that referenced this issue Feb 5, 2020
@sandkampderek
fix: send an event-like object into Field onChange when no event (red…
f338967 
…ux-form#4548)
dereksandkamp pushed a commit to dereksandkamp/redux-form that referenced this issue Feb 5, 2020
@sandkampderek
fix: send an event-like object into Field onChange when no event (red…
856130f 
…ux-form#4548)
@dereksandkamp dereksandkamp linked a pull request Feb 5, 2020 that will close this issue
Open
jptime added a commit to jptime/redux-form that referenced this issue Jul 31, 2020
@jptime
closes redux-form#4548
9b9ff91
@armin-th
Copy link

Just want to note, this is still an issue in 8.3.7

Appreciate any work being put into this :)

jptime added a commit to jptime/redux-form that referenced this issue Dec 27, 2022
@jptime
closes redux-form#4548
92a17a6
@mliakos-klara
Copy link

Sill an issue with 8.3.10 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: send an event-like object into Field onChange when no event (#4548) dereksandkamp/redux-form
9 participants
@toxsick @mateioprea @renatoagds @iamandrewluca @Iuriy-Budnikov @dereksandkamp @tohbansoon @armin-th @mliakos-klara