Selected item is synchronized between ListWithDetail elements - Application Crash #1977
Description
Describe the bug
I've created a sample project using the React seed repository. I create a layout where there are multiple tabs and under the different tabs there are ListWithDetail components. If I create such a layout, then the selected item inside the lists are synchronized.
Lets's imagine the two lists like this:
Users: ['John', 'Joe', 'Amy', 'Ani']
Suppliers: ['Bill', 'Mary']
If I select the last item from the users list, then the selection is sync'd to the suppliers list. As there is no such amount of suppliers, the detail section is displayed as empty on the layout and when I start typing in any information the application crashes.
Error log:
renderer.ts:619 Uncaught TypeError: Cannot read properties of undefined (reading 'firstname')
at Object.mapStateToMasterListItemProps (renderer.ts:619:1)
at Object.ctxToMasterListItemProps (JsonFormsContext.tsx:283:1)
at JsonFormsContext.tsx:410:1
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049: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)
at workLoopSync (react-dom.development.js:22707:1)
at renderRootSync (react-dom.development.js:22670:1)
at performSyncWorkOnRoot (react-dom.development.js:22293:1)
at react-dom.development.js:11327:1
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
at flushSyncCallbackQueue (react-dom.development.js:11309:1)
at scheduleUpdateOnFiber (react-dom.development.js:21893:1)
at dispatchAction (react-dom.development.js:16139:1)
at handleChange (renderer.ts:498:1)
at debounce.ts:35:1
at invokeFunc (lodash.js:10401:1)
at trailingEdge (lodash.js:10450:1)
at timerExpired (lodash.js:10438:1)
The above error occurred in one of your React components:
at http://localhost:3000/static/js/vendors~main.chunk.js:17852:18
at http://localhost:3000/static/js/vendors~main.chunk.js:17762:23
at ul
at http://localhost:3000/static/js/vendors~main.chunk.js:2489:73
at List (http://localhost:3000/static/js/vendors~main.chunk.js:63657:84)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:2489:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:58184:90)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:2489:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:58184:90)
at HiddenJs (http://localhost:3000/static/js/vendors~main.chunk.js:59278:24)
at WithWidth (http://localhost:3000/static/js/vendors~main.chunk.js:59526:90)
at Hidden (http://localhost:3000/static/js/vendors~main.chunk.js:58877:37)
at MaterialListWithDetailRenderer (http://localhost:3000/static/js/vendors~main.chunk.js:10018:22)
at http://localhost:3000/static/js/vendors~main.chunk.js:17832:18
at http://localhost:3000/static/js/vendors~main.chunk.js:17762:23
at http://localhost:3000/static/js/vendors~main.chunk.js:17277:13
at JsonFormsDispatchRenderer (http://localhost:3000/static/js/vendors~main.chunk.js:17235:24)
at http://localhost:3000/static/js/vendors~main.chunk.js:17330:21
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:2489:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:58184:90)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:2489:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:58184:90)
at HiddenJs (http://localhost:3000/static/js/vendors~main.chunk.js:59278:24)
at WithWidth (http://localhost:3000/static/js/vendors~main.chunk.js:59526:90)
at Hidden (http://localhost:3000/static/js/vendors~main.chunk.js:58877:37)
at MaterialLayoutRendererComponent (http://localhost:3000/static/js/vendors~main.chunk.js:16918:20)
at div
at HiddenJs (http://localhost:3000/static/js/vendors~main.chunk.js:59278:24)
at WithWidth (http://localhost:3000/static/js/vendors~main.chunk.js:59526:90)
at Hidden (http://localhost:3000/static/js/vendors~main.chunk.js:58877:37)
at MaterialCategorizationLayoutRenderer (http://localhost:3000/static/js/vendors~main.chunk.js:15226:20)
at http://localhost:3000/static/js/vendors~main.chunk.js:16944:23
at http://localhost:3000/static/js/vendors~main.chunk.js:17784:18
at http://localhost:3000/static/js/vendors~main.chunk.js:17762:23
at http://localhost:3000/static/js/vendors~main.chunk.js:17277:13
at JsonFormsDispatchRenderer (http://localhost:3000/static/js/vendors~main.chunk.js:17235:24)
at http://localhost:3000/static/js/vendors~main.chunk.js:17330:21
at JsonFormsStateProvider (http://localhost:3000/static/js/vendors~main.chunk.js:17464:21)
at JsonForms (http://localhost:3000/static/js/vendors~main.chunk.js:17345:19)
at div
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:2489:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:58184:90)
at div
at http://localhost:3000/static/js/vendors~main.chunk.js:2489:73
at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:58184:90)
at App (http://localhost:3000/static/js/main.chunk.js:230:17)
at InnerThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:95792:72)
at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:93246:24)
at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:95811: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.
Expected behavior
The selection between the two lists shouldn't be synchronized, as the size of the lists could be different.
Steps to reproduce the issue
uischema.json
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Users",
"elements": [
{
"type": "ListWithDetail",
"scope": "#/properties/users",
"options": {
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/firstname",
"label": "First Name"
},
{
"type": "Control",
"scope": "#/properties/lastname",
"label": "Last Name"
}
]
}
]
}
}
}
]
},
{
"type": "Category",
"label": "Suppliers",
"elements": [
{
"type": "ListWithDetail",
"scope": "#/properties/suppliers",
"options": {
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/firstname",
"label": "First Name"
},
{
"type": "Control",
"scope": "#/properties/lastname",
"label": "Last Name"
}
]
}
]
}
}
}
]
}
]
}
schema.json
{
"type": "object",
"definitions": {},
"properties": {
"users": {
"type": "array",
"items": {
"type": "object",
"title": "Users",
"properties": {
"firstname": {
"type": "string"
},
"lastname": {
"type": "string"
}
},
"required": [
"firstname"
]
}
},
"suppliers": {
"type": "array",
"items": {
"type": "object",
"title": "Users",
"properties": {
"firstname": {
"type": "string"
},
"lastname": {
"type": "string"
}
},
"required": [
"firstname"
]
}
}
}
}
data
{
"users": [
{
"firstname": "Max",
"lastname": "Mustermann"
},
{
"firstname": "John",
"lastname": "Doe"
},
{
"firstname": "Joe",
"lastname": "Smith"
}
],
"suppliers": [
{
"firstname": "Jane",
"lastname": "McDonald"
}
]
}
- Go to Users and Suppliers tab and see that selected item in the lists are synchronized
- Select the 3rd user (Joe) on Users tab
- Go to Suppliers tab and see that no item is selected in the list, but the details fields are visible
- Start typing in any of the fields => application crashes with the above mentioned error message
Screenshots
No response
In which browser are you experiencing the issue?
Google Chrome 103.0.5060.114 (Official Build) (64-bit)
Framework
React
RendererSet
Material
Additional context
No response