react-gears icon indicating copy to clipboard operation
react-gears copied to clipboard

HasManyFields mixes up values of uncontrolled inputs in rows

Open tyleralves opened this issue 4 years ago • 3 comments

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:

  1. Pass template that contains uncontrolled inputs to HasManyFields
  2. 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

hmf_uncontrolled

tyleralves avatar Jul 09 '20 16:07 tyleralves