Control.id doesn't get updated properly, if multiple forms are involved

[daywin94]

Describe the bug

I am using Vue2 with the with my own selection of renderers. I have v-cards with an integrated JSONForms object looking like this: The jsonforms object gets updated based on the currently selected tab.

Now the problem: Lets imagine there is a tab with 2 checkboxes in the form and another tab with 5 checkboxes. The position of the first two checkboxes inside each form are the same, because there is no other element in the schema. If I switch now between the two tabs (forms), then only the values for the checkboxes where there is a change in the position gets updated, even if all other values for the control get updated correctly.

Example: When accessing the first tab, the controls show the correct values:

But after switching the tab and the other form is shown, the control updates the path and the other values correctly, but doesn't update the id:

After reloading the page, the DOM of course shows the correct id, but it should already show the correct value with the form change.

Expected behavior

After switching from one form to the other, the control.id value updates correctly.

Steps to reproduce the issue

1. Create a json-form component with changable content
2. Create schemas and uischemas with two similar controls where just the prop id is different
3. After creating the properties, look at them in the browser and switch from one content to the other
4. Check if the DOM shows the correct value for the control.id

Screenshots

No response

In which browser are you experiencing the issue?

Mozilla Firefox 119.0.1

Which Version of JSON Forms are you using?

3.1.0

Framework

Vue 2

RendererSet

Other (please specify in the Additional context field)

Additional context

Own renderer set but nothing changed in the control.id

[sdirix]

Thanks for the report. We'll take a look but as it's not straightforward to reproduce without your custom renderers this might take a while. If you want to speed up the process it would be great to have a reproducible example, for example based on the Vue seed.

[sdirix]

To investigate @LukasBoll @TheZoker :

• Try to reproduce in Vue 3 and React
• Check whether the id cache needs to be updated and/or the reused control reconstructed

[sdirix]

@daywin94, if you set the key of json-forms differently based on the id of the selected tab, then JSON Forms will be newly constructed each time. I think this should workaround the problem until a fix is ready.

[LukasBoll]

I checked this issue for React and Vue; The ID is only set on initiation of a component and doesn't get updated on schema changes.