Selection inbetween nested Categorizations may lead to crash #2111
Description
Describe the bug
Hi,
I might have discovered a bug when using nested Categorizations using React and the Material RendererSet.
Imagine having a Categorization layout with two Categories which also have nested Categorizations.
The first inner Categorization consists of one Category and the second inner Categorization consists of two Categories.
Given the second inner Category of the second outer Category is selected. When switching back to the first outer Category then the app crashes.
This can be reproduced using the React seed and I think the problem might be similar to #1977 .
Expected behavior
The app should not crash.
Steps to reproduce the issue
schema.json
{
"type": "object",
"properties": {
"cat1": {
"type": "object",
"properties": {
"subcat11": {
"type": "string"
}
}
},
"cat2": {
"type": "object",
"properties": {
"subcat21": {
"type": "string"
},
"subcat22": {
"type": "string"
}
}
}
}
}
schema.json
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Cat1",
"elements": [
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "SubCat1-1",
"elements": [
{
"type": "Control",
"scope": "#/properties/cat1/properties/subcat11"
}
]
}
]
}
]
},
{
"type": "Category",
"label": "Cat2",
"elements": [
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "SubCat2-1",
"elements": [
{
"type": "Control",
"scope": "#/properties/cat2/properties/subcat21"
}
]
},
{
"type": "Category",
"label": "SubCat2-2",
"elements": [
{
"type": "Control",
"scope": "#/properties/cat2/properties/subcat22"
}
]
}
]
}
]
}
]
}
- Select "Cat2"
- Select "SubCat2-2"
- Select "Cat1" -> Crash
- See error
Uncaught TypeError: Cannot read properties of undefined (reading 'elements')
at MaterialCategorizationLayoutRenderer (MaterialCategorizationLayout.tsx:100:1)
at renderWithHooks (react-dom.development.js:14985:1)
at updateFunctionComponent (react-dom.development.js:17356:1)
at updateSimpleMemoComponent (react-dom.development.js:17215:1)
at beginWork (react-dom.development.js:19140:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
react-dom.development.js:20085 The above error occurred in the <MaterialCategorizationLayoutRenderer> component:
at MaterialCategorizationLayoutRenderer (http://localhost:3000/static/js/bundle.js:8744:20)
at http://localhost:3000/static/js/bundle.js:9887:21
at http://localhost:3000/static/js/bundle.js:9858:15
at http://localhost:3000/static/js/bundle.js:10135:15
at http://localhost:3000/static/js/bundle.js:7157:77
at http://localhost:3000/static/js/bundle.js:10204:13
at JsonFormsDispatchRenderer (http://localhost:3000/static/js/bundle.js:10153:176)
at http://localhost:3000/static/js/bundle.js:9868:21
at http://localhost:3000/static/js/bundle.js:9858:15
at div
at http://localhost:3000/static/js/bundle.js:1230:66
at Grid (http://localhost:3000/static/js/bundle.js:24432:86)
at div
at http://localhost:3000/static/js/bundle.js:1230:66
at Grid (http://localhost:3000/static/js/bundle.js:24432:86)
at HiddenJs (http://localhost:3000/static/js/bundle.js:25440:24)
at WithWidth (http://localhost:3000/static/js/bundle.js:25676:86)
at Hidden (http://localhost:3000/static/js/bundle.js:25043:37)
at MaterialLayoutRendererComponent (http://localhost:3000/static/js/bundle.js:7131:24)
at div
at HiddenJs (http://localhost:3000/static/js/bundle.js:25440:24)
at WithWidth (http://localhost:3000/static/js/bundle.js:25676:86)
at Hidden (http://localhost:3000/static/js/bundle.js:25043:37)
at MaterialCategorizationLayoutRenderer (http://localhost:3000/static/js/bundle.js:8744:20)
at http://localhost:3000/static/js/bundle.js:9887:21
at http://localhost:3000/static/js/bundle.js:9858:15
at http://localhost:3000/static/js/bundle.js:10135:15
at http://localhost:3000/static/js/bundle.js:7157:77
at http://localhost:3000/static/js/bundle.js:10204:13
at JsonFormsDispatchRenderer (http://localhost:3000/static/js/bundle.js:10153:176)
at http://localhost:3000/static/js/bundle.js:9868:21
at http://localhost:3000/static/js/bundle.js:9858:15
at JsonFormsStateProvider (http://localhost:3000/static/js/bundle.js:9590:23)
at JsonForms (http://localhost:3000/static/js/bundle.js:10247:19)
at div
at div
at http://localhost:3000/static/js/bundle.js:1230:66
at Grid (http://localhost:3000/static/js/bundle.js:24432:86)
at div
at http://localhost:3000/static/js/bundle.js:1230:66
at Grid (http://localhost:3000/static/js/bundle.js:24432:86)
at App (http://localhost:3000/static/js/bundle.js:148:17)
at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:45161:68)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:44029:24)
at ThemeProvider (http://localhost:3000/static/js/bundle.js:45180:24)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Screenshots
No response
In which browser are you experiencing the issue?
Google Chrome Version 111.0.5563.64
Which Version of JSON Forms are you using?
v3.0.0
Framework
React
RendererSet
Material
Additional context
No response