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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessing e.target.value on input onChange event causes Typescript Error #700

Closed
Hamzali opened this issue Oct 28, 2021 · 3 comments
Closed
Labels
typescript relating to typescript or types

Comments

@Hamzali
Copy link

Hamzali commented Oct 28, 2021

Describe the bug
Typescript errors when using event.target.value value on input/textarea/select/etc. html elements.

To Reproduce
Just open a Typescirpt solidjs project and write a input handler;

<input onChange={e => setInputName(e.target.value)} />

Expected behavior
No type erros expected.

Reproduction
https://playground.solidjs.com/?hash=941500074&version=1.1.6

image

@atk
Copy link
Contributor

atk commented Oct 28, 2021

The event is deferred, thus the target is not necessarily the same as the item it is happening on. Try e.currentTarget.value instead.

@ryansolid
Copy link
Member

Yeah this isn't Solid specific unless we commandeered the types in an incorrect way I think. The target could be any element that could produce that event below it in the tree, whereas the currentTarget is the element you are on. Maybe not relevant in a textarea, but in general TS can't know what the target is beyond any element that could create the event. I do wonder though for say a change or input event could we know every target would have to have a value property. Our JSX types were borrowed mostly from Preact and Inferno. Does React do something here?

Also I see an onChange. Unless you want it to trigger on blur it might not be what you are expecting. onInput is the DOM event for per character updates.

@ryansolid ryansolid added the typescript relating to typescript or types label Oct 29, 2021
@Hamzali
Copy link
Author

Hamzali commented Nov 9, 2021

I was getting into solid and refactoring my old react application to solid. I have used the examples in the website in order to convert my app then got the erros so I wanted to ask that what am I doing wrong.

As far as I know that React uses SytheticEvent interface in order to handle the events so it might has something more then the default DOM events.

It seems using currentTarget more correct way of using the dom reference in the event.

Thanks a lot for the detailed information and solutions @ryansolid @atk.

@Hamzali Hamzali closed this as completed Nov 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
typescript relating to typescript or types
Projects
None yet
Development

No branches or pull requests

3 participants