Add defaultFormStateBehavior initialRender type "populateRequiredDefaults"

[jackmead515]

Prerequisites

• [x] I have read the documentation

What theme are you using?

mui

Is your feature request related to a problem? Please describe.

Integrating with Pydantic on the backend, I have many default variables set to allow my users quick form generation and form submission. My users also don't like the fact that they cannot delete the entire input box to put in there own value (it prevents them from doing this due to the nature of how defaults are populated).

I can manipulate this behavior by setting:

experimental_defaultFormStateBehavior={{
   emptyObjectFields: 'skipEmptyDefaults'
}}

To ease this.

However, on the frontend, there is no feature to allow for "initial default generation", such that when the prop formData is past in as {}, the defaults can populated for the form initially.

Describe the solution you'd like

With a feature flag such as:

experimental_defaultFormStateBehavior={{
   initialRender: 'populateRequiredDefaults'
}}

The form would be prepopulated (even with a blank object such as {}). In combination with emptyObjectFields: 'skipEmptyDefaults', a user could have the defaults shown to them, while also being able to delete it if they want too.

Describe alternatives you've considered

No response

[heath-freenome]

@jackmead515 That is an interesting idea for a new feature. Are you willing to contribute it? In the meantime, you could always prepopulate your formData by making a direct call to the utility function before rendering the Form. The easiest way would be to call createSchemaUtils() function from @rjsf/utils and then call getDefaultFormState() on it.

[jackmead515]

I don't think I will have the time unfortunately! Although I'd really love too. I was looking into these functions, but couldn't figure it out quite right. Do I call these functions from the React form ref? or these are standalone utilities that I can call to populate form data, then I would have to wrap Form with a componentDidMount fall to have an "initialRender"?

[heath-freenome]

I don't think I will have the time unfortunately! Although I'd really love too. I was looking into these functions, but couldn't figure it out quite right. Do I call these functions from the React form ref? or these are standalone utilities that I can call to populate form data, then I would have to wrap Form with a componentDidMount fall to have an "initialRender"?

I'm guessing you would call it one before rendering your Form for the first time. Perhaps have a wrapper container that looks something like:

import { createSchemaUtils } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';
import { Form } from '@rjsf/core'; (or your theme);

import schema from '<schema location>';

const schemaUtils = createSchemaUtils(validator, schema);
const initialFormData = schemaUtils.getDefaultFormState(schema);


function MyForm() {
  return <Form schema={schema} validator={validator} formData={initialFormData} />;
}

You may also need an onChange to update the formData as well and the experimental feature to disable the defaulting behavior.

[heath-freenome]

@jackmead515 It turns out someone has built an almost finished PR that deals with initializations. Can you look at it and see if that might solve your problem?