TanStackT
TanStack6mo ago
2 replies
uncertain-scarlet

form with dependent fields (more complicated than just linking)

i have this sort of UI shown in the image. for the cost field, i'm tracking the raw value, for the splits field, i'm tracking only the percentage value. when it transitions to 'amount' mode, i just compute the value from the percentage of the value in 'amount', and show that. similarly onchange, i just transform the raw value into the proper percentage

in the basic cases this is easy. percent mode is no problem, those don't even really care what cost is, where just tracking essentially a proportion. also, when cost is static, this is also easy, the transform cycle above ^, is straightforward enough

this gets tricky when you're in amount mode AND change the cost value. this gives me two possible scenarios:
1. i pass down into the split fields the dynamic cost value. this means that, because i track the proportion in the form, when amount changes, so do the amount values in the splits section. this is what i'll settle on if i can't solve this, because it's not horrible, but it's still unintuitive to edit, say that i owe $5, and then edit cost and it updates to like $5.75 or something.
2. i pass down the static (original) cost value. i don't even know what's happening in this case but it's breaking thoroughly

i don't even know if this is an issue with my implementation, or the form itself, but looking for any sort of help on this, been tweaking things for hours trying to find the right way to solve this
image.png
Was this page helpful?