Items not rendered in an array with items under anyOf

[yaffol]

Hello, thank you for this library, it's great.

I am loading a schema (pen) which has an array defined, at the location journal.issns the possible items for which are nested under an anyOf.

When I load this schema into the form, nothing is rendered for that array. I can see a <Vjsf key="issns"/> component in Vue dev tools, but nothing shows up on screen.

I wondered if it was caused by a missing type property under the journal.issns.items key, so I tried adding one.

Setting type: "object" causes the ISSNs label and + button to show up, when you click it, a blank dialog box appears, and there's an ajv error in the console "Error: schema is invalid: data.properties should be object"

Setting type: "string" causes the ISSNs label to appear, and an input area, where you can enter strings (which are validated). However, you can't select which sort of ISSN you are adding (no subSchema selection).

Here's a pen that shows that.

I'm not sure if I can modify the schema to work better to, or if I've hit an edge case.

I've tried the same schema in JSON Editor and it seems to work, which makes me think the schema is probably OK.

I'd be very interested in working on an PR to fix or extend the library to support this, if it is an edge case.

[yaffol]

Update: I was able to make it work by copying more directly from the subSchema example in the docs, but the previous schema does definitely work in JSON-editor and React JSON Schema Form which makes me think it would be possible to enable it within Vuetify JSON Schema Form.

Any pointers gratefully received.

[yaffol]

Closing as there is a workaround.

[albanm]

Sorry for the lack of response. Good to hear that you found a workaround, I will try to have a look at your example later today or in the next few days.

[yaffol]

Ah thanks for the reply - I didn't want to leave a complex but workaround-able issue hanging around, but it would be good to get to the bottom of it.

I'm evaluating a load of JSON Schema form libraries for my employer, and I am very interested in this one (we have standardised on Vue/Vuetify as our UI framework) but one of the big things preventing me from adopting it immediately is the lack of ordering in the form.

So fields defined in the schema being ordered differently in the UI, depending on whether they are strings/objects as in https://github.com/koumoul-dev/vuetify-jsonschema-form/issues/187.

I would be interested in fixing this at source - I noticed this doesn't happen with the other libraries I'm looking at (React JSON Schema Form, Vue JSON Schema Form and my baseline which is JSON Editor). I wondered if you had any insight as to why it's different in Vjsf, and where to start looking to fix it? Of all the libraries, this is by far and away the best looking and nicest to use as a form user, so if I can help to fix it up, I'd be glad to.

[albanm]

I chose to display simple children on top and section children (objects with titles and allOfs) at the bottom for these reasons:

• sections and simple props are not always naturally ordered together (coming from properties or coming from a allOf)
• sections are not always visually mixable with simple properties (tabs, expansion panels)
• even when they could be mixed it makes for a poorly readable form (section with a title, then a simple prop that kinda looks like it is part of the previous section just a little bit more to the left, then another section)

But I am willing to consider improvements to offer more power to the user. I just don't want things to become too complicated (there already are enough head-scratching pieces of codes in this lib). The most relevant part of the code is here.

One thing to understand with vjsf is that I deliberately chose not to separate structure and presentation. In my opinion it makes for something more manageable, but it comes with important limitations.