[BUG] Radio component in form builder resets custom API key

[sergei-maertens]

Environment

Please provide as many details as you can:

• Hosting type
  • [ ] Form.io
  • [x] Local deployment
    • Version: 4.12 and 4.13
• Formio.js version: 4.13
• Frontend framework: React
• Browser: Brave/Chromium, Firefox
• Browser version: Chromium 99, Firefox 98

Steps to Reproduce

1. Open the Formio builder https://formio.github.io/formio.js/app/builder
2. Drag a radio component into the form
3. Click the "API" tab and change the key to something else, e.g. myCustomRadio
4. Click the "Data" tab and add a Value, e.g. label "Hello"
5. Go back to the "API" tab and observe that the key changed to the default of radio

Expected behavior

The API tab key value should remain myCustomRadio

Observed behavior

The API tab key value was reset to the default derived from the component label.

Extra information

We have a workaround in https://github.com/open-formulieren/open-forms/pull/1426 - the root cause seems to be the fact that the values have a label that changes, which conflicts with the component label change detection itself.

[sergei-maertens]

Colleague pointed out this could/may be vaguely related to #1604

[wag110894]

Hello Sergi,

Thanks for reaching out! We are able to replicate this issue on our side using our latest version of formio.js. We have created a ticket. For reference, the ticket number is: FIO-4820.

We welcome a pull request as well as have options for expediting the issue.

We will let you know once the issue is resolved.

Thanks for reaching out!

[claytongulick]

I'm running into an issue where I'm setting the key of a new custom component. This key needs to map back to a column in a database which is snake cased. I'm setting the key to "some_field_key" and it's being changed to "someFieldKey".

Is there a reason why an explicitly assigned API key would be changed internally? It looks like this is undocumented behavior, and certainly surprising - I wouldn't expect a value that I explicitly set to be changed.

[heather-formio]

@claytongulick This is resolved in Formio.js 4.14.9. Please let us know if anything persists or if it is resolved for your use case.