eclipsesource / eclipsesource/jsonforms

Form with an object with enabled additionalProperties tries to insert data into a wrong field

Open
#2,423 1 comment 1 reaction 1 assignee Claimed by @sdirix View on GitHub
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

![Image](https://github.com/user-attachments/assets/747b8344-6400-41f7-83f5-2e1075a406f0)

### 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
![Image](https://github.com/user-attachments/assets/9d79e641-759d-44d9-a9aa-2533b8a3e6ea)

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.
![Image](https://github.com/user-attachments/assets/8d3f95a6-6cb0-4c15-bc3c-9b81ee7f1509)

But I don't know if such a fix breaks other things.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.