LayoutGridField causes array items to collapse when edited all themes #4765
Description
Prerequisites
- I have searched the existing issues
- I understand that providing a SSCCE example is tremendously useful to the maintainers.
- I have read the documentation
- Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.
What theme are you using?
mantine
Version
6.0.0-beta.15
Current Behavior
When using LayoutGridField with the Mantine theme, array fields exhibit unexpected behavior where editing an added array item causes the entire entry to collapse/disappear from the form.
Steps to Reproduce
Load this example on rjsf-playground
The UI schema gets overridden when setting the theme to mantine, so you will have to manually set the uiSchema to:
{
"ui:field": "LayoutGridField",
"ui:layoutGrid": {
"ui:row": {
"children": [
{
"ui:row": {
"children": [
{
"ui:col": {
"span": 12,
"children": [
"listOfStrings"
]
}
}
]
}
}
]
}
}
}- Set up the rjsf-playground with the above configuration
- Add a new item to the array using the add button
- Edit the field within the newly added array item
- Observe that the entire array entry collapses/disappears
Expected Behavior
Array items should remain visible and editable after being added and modified, similar to how they behave without LayoutGridField.
Environment
- @rjsf/core: 6.0.0-beta.15
- @rjsf/mantine: 6.0.0-beta.15
- @mantine/core: 8.3.0
- React: 19.1.0
- Next.js: 15.5.2