Send additional props to newly added array element components

[mfulton26]

I have defined a custom SchemaField to wrap <SchemaField {...props} /> for properties of type 'object' within <details> tags with accompanied by a <summary> tag. e.g.:

const DetailsSchemaField = function (props) {
    switch (props.schema.type) {
        case 'object':
            if (props.idSchema.$id !== 'root') {
                return (
                    <details>
                        <summary className="truncate">Details {JSON.stringify(props.formData, Object.keys(props.schema.properties))}</summary>
                        <SchemaField {...props} />
                    </details>
                );
            }
        default:
            return (<SchemaField {...props} />);
    }
};

This works but whenever a user adds a new array element it is closed by default. I want the initial rendering of the form (which is rather large) to have all of the nested objects to be collapsed/closed by default but whenever I add a new object to the page I want it to be expanded/opened by default (as they need to define the properties in it).

I'm having trouble figuring out the best way to approach this. I can make my DetailsSchemaField manage the open attribute of the <details> tag but I can't figure out how to pass in a different prop value to it onAddClick. I suspect that I need to define an ArrayFieldTemplate but that seems more focused around the layout of my arrays and I don't see any way to pass props down to my custom fields.

Any ideas would be much appreciated.

In short, I want to be able to render really large forms and have sections collapsed by default but whenever I click the add button on an array of objects I want the newly added object to be expanded by default instead of collapsed as the user naturally should be setting those new properties within the newly added object.

Thank you.

[jorgerobles]

+1

[glasserc]

Is it possible for the user to trigger collapse/expand behavior, or do things that start collapsed remain collapsed forever? If it's possible for the user to change, where do you maintain that state?

It seems natural to me to put the expand/collapse state in the uiSchema. However, we don't really have support adding/removing items from the uiSchema. We do support providing a default for formData. It feels a little odd to put the state of the UI in the formData, but I bet you could get it to work.

See also #268 and #465. Collapsible form properties have been a requested feature for a while.

[mfulton26]

Browsers supporting the <summary> element maintain the open/close state and users can click the summary/caption/legend to expand/collapse the associated <details> element.

That's an interesting idea of using the uiSchema to store that state but would that work for arrays of objects each with their own state? I'll have to give that some more thought...

[richardkazuomiller]

We're currently working on adding collapsible sections to our form, partly because it can get very long in our use case and partly to solve performance issues caused by having so a lot of RJSF inputs on the page. It would be nice to have some differences in the UI schema depending on whether it's an existing value or a new one, but we'll also try passing in the state of whether or not it is new as part of the form data 😄