Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
awaigand opened this issue Jul 7, 2023 · 1 comment · Fixed by #2191
Closed

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

awaigand opened this issue Jul 7, 2023 · 1 comment · Fixed by #2191
Assignees
Milestone

Comments

@awaigand
Copy link

awaigand commented Jul 7, 2023

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

@sdirix
Copy link
Member

sdirix commented Jul 7, 2023

Thanks for the report!

@sdirix sdirix added this to the 3.2 milestone Jul 7, 2023
LukasBoll added a commit to LukasBoll/jsonforms that referenced this issue Oct 13, 2023
LukasBoll added a commit to LukasBoll/jsonforms that referenced this issue Oct 13, 2023
LukasBoll added a commit to LukasBoll/jsonforms that referenced this issue Oct 20, 2023
LukasBoll added a commit to LukasBoll/jsonforms that referenced this issue Oct 24, 2023
Replaced `isNaN` with `Number.isNaN` to ensure accurate checks.
`isNaN` returns true for most text values, resulting in labels not being shown in the array renderer.

closes eclipsesource#2157
sdirix pushed a commit that referenced this issue Oct 24, 2023
Replace `isNaN` with `Number.isNaN` to ensure accurate checks.
`isNaN` returns true for most text values, leading to missing 
labels in the Vue array renderer.

closes #2157
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants