Enhancing the custom layout example

General
1

I’ve managed to incorporate the custom group to behave like a MUI accordion as documented here Custom Layouts - JSON Forms. While it works as described in that tutorial, I want it to show all of the custom groups in an expanded state (vs the default which is collapsed). How can I do that?

I tried to set the MUI Accordion prop named “expanded” to true in the custom renderer and that renders all of them expanded (that’s expected). However, when I click to toggle them closed/collapsed, nothing happens. Why is it that the default state of the custom renderer (collapsed) can toggle, but, not a when a prop set for expanded is set to true?

Lastly, I’m rendering a form with tabs using the categories type. Each tab can contain the custom groups. I’ve noticed that when I switch between tabs, some or all custom groups are collapsed even though I’d left them all in an expanded state prior to switching tabs and coming back. If I switch enough times to different tabs (I have 7 and counting), eventually all of the custom groups will be collapsed. Do you know what would be causing this? Ideally, I’d like to have the form remember which custom groups were expanded and which were collapsed so that it does not confuse and frustrate the user when they’re switching tabs.

2

Hi @msueping,

The issues you are describing are only partially related to JSON Forms. How the accordion behaves (i.e. how it expands/collapses) is solely managed by your component. For example when you hand over expanded to the MUI Accordion then that accordion is in controlled mode. You then also need to listen to its changes and correspondingly update the expanded prop handed over to the accordion. If you only want to set the initial state of the accordion and then let it handle the rest you need to hand over defaultExpanded instead. See the Material UI API for more information.

Regarding the categories: We’re using the Material UI Tabs to implement them. I think they should maintain their internal state between switching them but I’m actually not sure (maybe we’re also not using them in a way which maintains state).

Depending on whether they maintain their internal state or not keeping the groups collapsed/expanded either works out of the box or their collapsed/expanded state must be maintained higher up (for example via a context) and restored on tab switch.