PropertyFieldCollectionData: Bug with onCustomRender()

[spplante]

Category

• Enhancement
• Bug
• Question

Version

1.13.1

Expected / Desired Behavior / Question

onCustomRender should only be called once on initial row creation

Observed Behavior

I tried using the onCustomRender function in order to use an AsyncDropdown I created myself which loads it's options async. Everything works perfect on the initial loading of the modal window. I can see my dropdown load and then the options appear correctly. However, as soon as I create another row, I get this really weird behavior where the loading gif starts playing on previously created row (instead of the new one) and then the newly created row gets the value of the previously created row, for the custom field.

To make sure it wasn't my component, I replaced it with the provided example which uses a simple input, and while I don't get the weird loading behavior (which is normal cause it's a simple input) I do get the newly created row with the same value in the custom field as the previously created row, which isn't normal.

When putting a breakpoint in the onCustomRender method, I didn't figure out the pattern yet but it does get called a whole lot of times. When adding a new row, it gets called for all the previous rows (not sure if normal), then it gets called for the newly created row, then it gets called 2-3 times more which sounds odd.

Steps to Reproduce

Use the provided example and add new rows you will see what happens.

{
  id: "customFieldId",
  title: "Custom Field",
  type: CustomCollectionFieldType.custom,
  onCustomRender: (field, value, onUpdate) => {
    return (
      React.createElement("div", null,
        React.createElement("input", { value: value, onChange: (event: React.FormEvent<HTMLInputElement>) => onUpdate(field.id, event.currentTarget.value) }), " 🎉"
      )
    );
  }
}

Thanks!

[spplante]

So I did some debugging and I fixed this in PR #136. The details of the fix can be found in the PR itself.