pablo-abc
Felte not picking up field data when using contexts
Describe the bug
I am trying to setup contexts for a solid js project, but for some reason when the field is populated and the submit button is pressed a validation error is thrown stating that the field cannot be empty - but it is populated. If I pass the variable via props instead, everything works as expected.
Which package/s are you using?
@felte/solid (SolidJS), @felte/validator-zod
Environment
Firefox
To reproduce
Click on submit button in the provided link. You can see the input text is populated but I am getting a Zod validation error.
Small reproduction example
https://codesandbox.io/s/winter-tdd-n45wry?file=/src/main.tsx
Screenshots
No response
Additional context
No response
My initial guess here would be that context is setting the value slightly after Felte has already grabbed the DOM values as initial values for the form. I'd have to look into this, though!
Does it work if you call setFields on onMount (as a slight hack)?
Not sure about onMount, but setFields doesn't work, setData doesn't work, and setInitualValues doesn't work either. Solid contexts are only provided once available, so yes, there is a delay, and it seems like the DOM is processed before the value is set, and also before the listeners are started.
onMount with refs does work.
let el;
onMount(() => form(el));
<form ref={el}>...</form>
Although the above solution fixes the previous problem, it gives arise to another very interesting bug.
I am currently experiencing a problem whereby useContext initially returns an empty string.
onMount() is triggered and the form validation is setup after the DOM has rendered - all is good.
A few milliseconds later, useContext passes the correct value into the text box.
You would expect the handleChange listener to be triggered, but it isn't.
The problem is the listeners are only triggered based on keyboard or mouse input but the change is happening reactively so none of the handle* listeners pick up the change and update the value, and thus, validation fails.
@0bon this actually happens due to the browser itself not dispatching any events when changing the value of an input programmatically! So it's an expected behaviour.
Pre-1.0.0 I had experimented proxying the .value/checked property of inputs but that ended up bringing some really hard to debug issues and (in some cases) infinite loops, so I decided to drop it.
I'm really interested in looking into this and if there's a way to make it work with Context as frictionless as possible, but this is a use-case I had not considered initially 😅