Bug in Assigning Default Values to formData with Deeply Nested Required Properties

[pjhh88]

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?

core

Version

5.22.3

Current Behavior

const schema: RJSFSchema = {
          type: 'object',
          properties: {
            baseProperty: {
              type: 'object',
              properties: {
                optionalProperty: {
                  type: 'object',
                  properties: {
                    nestedRequiredProperty: {
                      type: 'string',
                      default: '',
                    },
                  },
                  required: ['nestedRequiredProperty'],
                },
                requiredProperty: {
                  type: 'string',
                  default: 'foo',
                },
              },
              required: ['requiredProperty'],
            },
          },
          required: ['baseProperty'],
        };

Under the setting
experimental_defaultFormStateBehavior: { emptyObjectFields: 'populateRequiredDefaults' },

the result is:

Object {
  "baseProperty": Object {
    "optionalProperty": Object {
      "nestedRequiredProperty": "",
    },
    "requiredProperty": "foo",
  },
}

Expected Behavior

{
  baseProperty: {
    requiredProperty: 'foo',
  }
}

It seems that while only requiredProperty is explicitly marked as required in the schema, optionalProperty is being populated because its child property, nestedRequiredProperty, is required and has a default value.

Looking at the existing test cases, such as this one:

react-jsonschema-form/packages/utils/test/schema/getDefaultFormStateTest.ts

Lines 2259 to 2286 in 1c443a6

	it('test an object with an optional property that has a nested required property with default', () => {
	const schema: RJSFSchema = {
	type: 'object',
	properties: {
	optionalProperty: {
	type: 'object',
	properties: {
	nestedRequiredProperty: {
	type: 'string',
	default: '',
	},
	},
	required: ['nestedRequiredProperty'],
	},
	requiredProperty: {
	type: 'string',
	default: 'foo',
	},
	},
	required: ['requiredProperty'],
	};
	expect(
	computeDefaults(testValidator, schema, {
	rootSchema: schema,
	experimental_defaultFormStateBehavior: { emptyObjectFields: 'populateRequiredDefaults' },
	})
	).toEqual({ requiredProperty: 'foo' });
	});

It appears that this behavior works correctly for 2-level nested structures, but a bug seems to occur when the structure goes 3 levels deep.

Steps To Reproduce

No response

Environment

- OS:
- Node:
- npm:

Anything else?

No response

[heath-freenome]

@abdalla-rko Seems like someone found another issue in getDefaultFormState() :(. Is this something you'd like to tackle next?

[nickgros]

Playground link