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.

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

Already on GitHub? Sign in to your account

useTextField mutates onChange behavior internally #2239

Closed
csantos1113 opened this issue Aug 21, 2021 · 2 comments
Closed

useTextField mutates onChange behavior internally #2239

csantos1113 opened this issue Aug 21, 2021 · 2 comments

Comments

@csantos1113
Copy link
Contributor

馃悰 Bug Report

I was debating myself if this should be reported as a bug or as a question (given that this code it's been there since 2+ years ago), but decided to go with the Bug route:

useTextField is overwriting the onChange behavior by deciding to send e.target.value as the prop instead of sending the entire SyntheticEvent object.

https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/textfield/src/useTextField.ts#L80

onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)

Why do I think this is a bug?
Literally any other event handler (onCopy, onCut, onSelect, onInput, etc, etc) is passed down without any modifications, see: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/textfield/src/useTextField.ts#L88-L105

See, React SyntheticEvent: https://reactjs.org/docs/events.html#form-events

馃 Expected Behavior

onChange to not have custom logic and to be passed down straight to the input

馃槸 Current Behavior

onChange is called with the raw value of the input when all other event handlers (ex: onInput) are called with the SyntheticEvent object.

馃拋 Possible Solution

Change

onChange: (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)

to

onChange: props.onChange

Yes, I understand this would be breaking change :/ - (Sorry, I don't understand why this wasn't raised long ago)

馃敠 Context

I'm trying to integrate an external library (react-hook-form) that gives me a onChange handler that is expected to receive a SyntheticEvent but it fails badly because this hook calls onChange fn with the raw value.

馃捇 Code Sample

This example does not integrate with react-hook-form, but showcases the different values we get on onChange vs other event handlers
https://codesandbox.io/s/optimistic-hofstadter-4zg5o?file=/src/App.js

馃實 Your Environment

Software Version(s)
@react-aria/textfield 3.3.1
Browser All
Operating System All
@devongovett
Copy link
Member

Please see #1860 (comment) and related discussion.

@LFDanLu
Copy link
Member

LFDanLu commented Aug 25, 2021

Closing for now, feel free to reopen if you have further questions or concerns.

@LFDanLu LFDanLu closed this as completed Aug 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants