useControl relationship to field meta (value, valid, etc.)

[halljus]

I'm taking useControl for a test drive and noticed a couple things. First, when I change the control value with control.change, it doesn't change the field value. At first I thought this was fine, I'd just use the control.value everywhere I was previously using field.value. But then I noticed field.valid doesn't seem to stay in sync either. For example, if I try to submit an invalid field, field.valid will change from true to false as expected, but when I change to a valid value (and call control.change), field.valid remains false (probably due to the first issue where the value is not updated?). So now I'm just wondering about the relationship between the control and the field... 🤔

[edmundhung]

If you see field.value and control.value not in sync, it's likely something goes wrong with the register step. (e.g. register on the wrong element). field.value is always a sync of the FormData API which reads directly from the dom. While control.value is just a react state which is suppose to be synced with the input you registered when you call control.change(). Which UI library are you using? I think I should also start putting a PR up with all the examples updated to use the useControl hook.

[edmundhung]

That's case 2

The Observe form.value retains the default/initial customTopping value. 👍

It is retained only because the customTopping is still rendered when you remove the topping and Conform doesn't know the customTopping field is removed later. If you try to submit the form after removing the topping, you will see the customTopping value to be gone.

[halljus]

Right, so to accomplish the goal (keeping value/dirty states in sync), we can't conditionally render customTopping either. We have to fall back to rendering it unconditionally and moving the condition to the hidden attribute like we were doing before. Right? At least for now, until you can find a sweet fix! 😁

[halljus]

Hey Edmund, have you had a chance to consider a solution to case 2? No rush, just curious!

[edmundhung]

It will be fixed by #491. Implementation is already done. I just need to write some tests.

[halljus]

Here's an updated reproduction for v1.1.0 (cross-posting it here since the issue where I originally provided it is now closed and it probably belongs here anyway):

https://stackblitz.com/edit/remix-run-remix-ddmnpg?file=app%2Froutes%2F_index.tsx

[bzitzow-osh]

I think I should also start putting a PR up with all the examples updated to use the useControl hook.

@edmundhung did that set of examples ever get published?