eclipsesource / eclipsesource/jsonforms
Form with an object with enabled additionalProperties tries to insert data into a wrong field
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 424
- Avg merge
- 17d 8h
- Merged PRs (30d)
- 1
Description
### Describe the bug
Let's assume that we have a form with such a schema:
```js
const schema = {
properties: {
someObject: {
type: "object",
additionalProperties: {
type: "string"
}
}
},
};
```
when I try to use the form and add a new field to the object, the field gets inserted, but it's constantly empty when I insert text into the form.
```json
{
"someObject": {
"someKey": ""
}
}
```
After some debugging, I discovered that `jsonforms/vue-vuetify` tries to insert data into `someObject.someKey.someKey` field instead of `someObject.someKey`
### Expected behavior
The value I inserted into the form should appear in the data
```json
{
"someObject": {
"someKey": "my text"
}
}
```
### Steps to reproduce the issue
1. Clone https://github.com/eclipsesource/jsonforms-vue-seed
2. Remove `@jsonforms/vue-vanilla`, install `vuetify` and `@jsonforms/vue-vuetify`
3. Make necessary changes in `main.ts` to enable vuetify
4. Change renderers in `App.vue` to `extendedVuetifyRenderers`
5. Change schema in `App.vue` to something like this:
```js
const schema = {
properties: {
someObject: {
type: "object",
additionalProperties: {
type: "string"
}
}
},
};
const uischema = {
type: "VerticalLayout",
elements: [
{
type: "Control",
scope: "#/properties/someObject"
}
],
};
const data = ref({
someObject: {}
});
```
6. Launch the application
7. Insert the new key in the form, it should appear in the JSON data preview below the form
8. Write some text in that value, it doesn't appear in the data preview
### Screenshots

### Which Version of JSON Forms are you using?
3.5.1
### Package
Vue Vuetify Renderers
### Additional context
I put a breakpoint in the `mapStateToControlProps` function in `renderer.ts` file and I discovered that the key name is duplicated in the property that jsonforms tries to modify

after some more digging, I think that the issue is in `toAdditionalPropertyType` function in `AdditionalProperties.vue` file
```js
return {
propertyName: propName,
path: composePaths(control.value.path, propName),
schema: propSchema,
uischema: propUiSchema,
};
```
when I removed the call to `composePaths` function
```js
return {
propertyName: propName,
path: control.value.path,
schema: propSchema,
uischema: propUiSchema,
};
```
it seems to work.

But I don't know if such a fix breaks other things.
Contributor guide
Assessment
This issue has not been assessed yet.