Custom Panel Config not Preserving Data When Reordering

[victorvaldez5]

Environment

Package manager: npm vite: 5.2.10 vue: 3.4.25 @vueform/builder: 1.4.4 @vueform/vueform: 1.9.13

Reproduction

https://stackblitz.com/edit/github-atqf2q?file=builder.config.js

1. Drag Race field into the form
2. Drag Gender Field to the form
3. Click the gender field so that the configuration panel is open
4. notice that in the data -> items, the default mappings is set to golden retreiver
5. reoder the gender field to be the first element on the form
6. notice that the mapping field is cleared.
7. click on the race field, notice that the default mapping is still there
8. click on the gender field, notice that the default mapping is also back

Describe the bug

We've created a custom Radiogroup Input that has an extra field in the data configuration panel where users can define a mapping. The mapping options are being pulled from an API. We have set defaults for these new fields in the builder config.

If you add these two fields into your form, and then you reorder the fields, the mapping data in the config panel disappears. sometimes closing and reopening the element configuration panel brings back the original value, sometimes it doesn't

Additional context

No response

Logs

No response

[adamberecz]

Thanks for the detailed report. I'll look into it and get back to you.

[adamberecz]

Ok, so I've figured out what caused the issue.

Short version: if you are using async items with selects/checkboxes/radios, you have to add this for them:

onChange(newValue, oldValue, el$) {
  if (newValue === null && oldValue) {
    el$.update(oldValue)
  }
}

Here's the updated example: https://stackblitz.com/edit/github-atqf2q-mwe4bk?file=src%2Fcomponents%2FGenderOptionField.js,src%2Fcomponents%2FRaceOptionField.js

Long version: The issue is that the config panel needs to refresh twice on moving / renaming to make sure moved/renamed element values (eg. name) and elements with reference to a moved/renamed element (eg. condition paths) are updated. This in turn nulls the value of an async select list, because on the first refresh, the list element is first emptied, which already triggers an update for the builder, and the second update already tries to refresh with null before the option list from the first refresh is resolved. With the method mentioned above, you can ensure, that if the value is ever nulled it gets rolled back to the latest one.

[victorvaldez5]

Hey @adamberecz, thank you for the prompt response. I was on vacation last week, but I implemented this fix this morning and can confirm that it has solved my problem!

Thank you