react-gears
react-gears copied to clipboard
HasManyFields mixes up values of uncontrolled inputs in rows
I believe the cause is using indices as keys for rows combined with using uncontrolled inputs. Since we remap the HMF value after each change, the HMFRow
keys will always be 0 to {value.length - 1}. When react reconciles, it deletes the last row because its key no longer exists. With controlled inputs the last row is still deleted, but this isn't a problem because the values are also reassigned.
STR:
- Pass template that contains uncontrolled inputs to HasManyFields
- Delete any row besides the last row
O:
- Any uncontrolled input in the deleted row retains its value
- Uncontrolled inputs in the last row are deleted
- Any controlled input values are reassigned to proper row
D: Uncontrolled inputs should properly stay with the Rows they were created on
Here's a PR with a story that reproduces the bug: https://github.com/appfolio/react-gears/pull/750