Hi all, I’m losing my mind over this error a little bit. I’m trying to put a Categorization inside another Categorization, and this appears to be breaking something (thought I’m really just guessing about the cause at this point). Code in the comments:
[original thread by henry-oconnor]
[henry-oconnor]
The topmost Control with scope #/properties/ID renders as a textarea, but the one at the bottom does not. What is causing the scope to change inside that second categorization (if that’s even what’s happening)?
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Experiments",
"elements": [
{
"type": "ListWithDetail",
"scope": "#/properties/experiments",
"options": {
"labelRef": "#/items/properties/ID",
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/ID"
},
{
"type": "Control",
"scope": "#/properties/preExperimentMeasurementIDs"
},
{
"type": "Control",
"scope": "#/properties/postExperimentMeasurementIDs"
}
]
},
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Sequential",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/ID"
},
Hi @henry-oconnor(henry-oconnor), can you provide a complete example with which I can reproduce the issue, i.e. a JSON Schema and UI Schema? From a first glance both controls should render the same way, as Categorization is only a visual element and doesn’t affect scope resolution.
You said that your control renders as a textarea. As I don’t see a options: { multi: true }, are you using a custom renderer?
[henry-oconnor]
Sorry, I meant textfield. Here are the schemas:
UI Schema
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Experiments",
"elements": [
{
"type": "ListWithDetail",
"scope": "#/properties/experiments",
"options": {
"labelRef": "#/items/properties/ID",
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/ID"
}
]
},
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Sequential",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/ID"
}
]
}
]
}
]
}
]
}
}
}
]
}
]
}
Schema
{
"$id": "#schema",
"type": "object",
"properties": {
"experiments": {
"type": "array",
"items": {
"type": "object",
"properties": {
"ID": {
"type": "string"
}
},
"additionalProperties": false,
"additionalItems": false
}
}
},
"required": [
"experiments"
]
}
Data
{
"experiments": [
{
"ID": "Experiment 1"
}
]
}
I can’t reproduce the issue. I tried it with the current JSON Forms 2.5.0, with the previous version 2.4.1 and also with the prerelease 2.5.1-alpha.1 and it worked for me in all of them.
Are your JSON Forms versions aligned, i.e. are you using the same version for @jsonforms/core, @jsonforms/react and @jsonforms/material-renderers? What else do you do besides invoking JSON Forms? Could you share the code?
Ah I just realized… You’re using the Angular variant of JSON Forms. There I can reproduce the issue.
[henry-oconnor]
Yeah, I should have mentioned that. Damn, I was hoping it was a mistake on my part.
The fix is probably not too hard. I guess that somewhere the correctly scoped JSON Schema is not used. Probably it gets lost from ListWithDetail → Categorization, so that the Categorization always works on the root schema instead of the appropriately scoped one. It has to be an Angular renderer set issue as it works in general as can be seen in the React renderer set. Would you be interested in contributing a fix?
[henry-oconnor]
Sure, I’ll do a little digging this weekend and see if I can figure it out. Thank you for your help!
