Skip to content

Array Renderer Child Label Regression Bug in Vue (3.1.0) #2157

@awaigand

Description

@awaigand

Describe the bug

Hi there, thank you for your hard work.

In 3.1.0 in Vue (3) using the Vanilla renderers, the labels of child elements of the Array Renderer are no longer set to the first primitive of the Array.
So if I have a Json Schema such as this:

const schema = {
  properties: {
    names: {
      type: "array",
      items: {
        type: "object",
        properties: {
          firstName: {
            type: "string",
          },
          lastName: {
            type: "string",
          },
        }
      },
    },
  },
};

And a UI Schema like this

const uischema = {
  type: "HorizontalLayout",
  elements: [
    {
      type: "VerticalLayout",
      elements: [
        {
          type: "Control",
          scope: "#/properties/names"
        },
      ],
    }
  ],
};

I get a form such as this:
grafik

If I type in the first name and tab out of the field it looks like this:

grafik

So the Child Item Label, which would be in the frist gray box, stays empty.

If I do the same in 3.0.0, the label is set correctly (first gray box).

grafik

I did not have chance to debug through the vue-vanilla-renderer code yet, but no errors are thrown.

Best wishes,
Andreas W.

Expected behavior

The child label should be correctly set to the first primitive of the array, i.e. the same behavior as in 3.0.0.

Steps to reproduce the issue

  1. Use the jsonforms vue-seed-project using vue 3 and the vanilla rendererse
  2. Be on version 3.1.0
  3. Replace the schema and ui-schema (App.vue) with the ones provided in the description
  4. Run "npm run serve"
  5. Go to "localhost:8080"
  6. Add an array element by pressing "+"
  7. Type a Name in the "First Name" field
  8. Tab out of the field
  9. See that the gray box stays empty

I also prepared a reproduction repo which is based on your seed repo here: https://github.com/awaigand/jsonforms-vue-array-label-bug

Screenshots

No response

In which browser are you experiencing the issue?

Firefox 115, Chrome 114

Which Version of JSON Forms are you using?

v3.1.0

Framework

Core, Vue 3

RendererSet

Vanilla

Additional context

No response

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions