Unexpected behavior when reordering custom field elements in an array

[mtleonard120]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

I noticed some unexpected behavior when reordering array elements which are being represented by custom fields. At first I noticed that reordering did not seem to be working at all when custom fields were used. The custom fields were maintaining their own local state (initially set on mount by the form data prop passed in) and treating local state as the source of truth.

Naturally, since array reorderings are happening at a parent level, the local states of child custom fields are not being properly updated. Hence, I thought that the issue could be resolved by maintaining a local state within the custom fields but instead treating the formData prop as the one source of truth. It turns out that this leads to some unexpected behavior as well - it would seem that the RJS Form is losing track of the order of the custom fields on array reorderings.

This can be seen if there are two custom field elements (which have a non-scalar state) in an array; after reordering the elements into an order not matching the original order and then updating a single attribute within one of the custom fields, the other attributes within that field are erroneously updated.

Steps to Reproduce

Functional demo here: https://mtleonard120.github.io/rjsform-bug-demo/
Repo here: https://github.com/mtleonard120/rjsform-bug-demo

Within the linked demo, make the following observations:

• In Form 1:
  Reordering and editing after reordering works as expected when not using custom fields.

• In Form 2:
  Reordering is completely non-functional when custom fields use their own local state as the source of truth, but editing does work as expected

• In Form 3:
  Reordering works as expected. But after a single reordering, if you edit the lon attribute in one of the fields, the lat attribute unexpectedly updates to be equal to the lat attribute of the field that originally was in that spot in the array order.

Expected behavior

When using the formData prop as the source of truth, custom fields should be able to be reordered and freely updated.

Actual behavior

The RJS Form appears to lose track of which custom field is which when reorderings occur.

N.B. I found that it is possible to use of a getDerivedStateFromProps method within a custom field to somewhat address this issue, but this adds a tremendous amount of complexity to custom fields containing more than just a couple attributes and also needs to be custom written for each kind of custom field being used.

Version

Using react-jsonschema-form version 1.0.6

[amuzyka]

@maartenth you can use uuid for keys. It's not ideal, but worked for me with my custom fields.

[epicfaace]

Perhaps this is related to #1046?

[amuzyka]

@epicfaace you are right, that's the issue..

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.