T
TanStack3w ago
sensitive-blue

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
No description
1 Reply
sensitive-blue
sensitive-blueOP3w ago
here's where the form is defined: https://github.com/jackbisceglia/blank/blob/e2e/edit-splits/packages/web/src/components/form/fields.tsx#L397 jsx usage in same file: https://github.com/jackbisceglia/blank/blob/e2e/edit-splits/packages/web/src/pages/_protected/groups/%24slug_id/%40expense/sheet.tsx#L480 here's where the SplitField component is defined that does the transform: https://github.com/jackbisceglia/blank/blob/e2e/edit-splits/packages/web/src/components/form/fields.tsx#L397 still curious to hear thoughts, but after some back n forth with AI, it seems like the actual cost values as source of truth is a simpler approach. seems counterintuitive, but makes sense

Did you find this page helpful?