formData includes undefined properties

[AlexMunoz]

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 or a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.0.1

Current Behavior

Hello, I am migrating from a beta version to the release version of RJSF and I noticed that after beta.19 the formData object in the onChange and Submit event includes some undefined properties.

In version beta.19, the formData looks like:

{title: "A new task", done: false}

and after beta.19, the formData looks like:

{title: "A new task", name: undefined, done: false}

Expected Behavior

Only the fields I have changed are included in the formData.

Steps To Reproduce

1. Visit the samples.
2. Go to the console Tab.
3. Check the logs

Version 5.0.0-beta.19
https://codesandbox.io/s/rjsf-5-0-0-beta-19-ff6foc?file=/src/App.js

Version 5.0.1
https://codesandbox.io/s/rjsf-5-0-1-qhq3p6?file=/src/App.js

Environment

- OS: Linux
- Node: 16.15
- npm: 8.11

Anything else?

I am not sure if this behavior is expected. But it only occurs for properties at the first level, nested properties are not included as undefined.

why I need this: well I am doing a deep comparison between the current formData with the initial one, to detect if changes were made. If there is another way to check this, please let me know.

Update:
I think the change was introduced here: #3408

react-jsonschema-form/packages/core/src/components/Form.tsx

Lines 322 to 326 in 2e96fe2

	const formData: T = schemaUtils.getDefaultFormState(
	schema,
	inputFormData,
	"excludeObjectChildren"
	) as T;

[heath-freenome]

@AlexMunoz What happens if you use liveOmit? Also, how are you doing a deep comparison? Theoretically { x: undefined } is the same as {} depending on the way you compare.

[AlexMunoz]

Hi @heath-freenome
I created a new sample https://codesandbox.io/s/rjsf-5-0-1-liveomit-2xd11r?file=/src/App.js and liveOmit ist not working for this case.

I think, liveOmit works in the case that the initial dataForm has an attribute that it not present in the schema.

For example, if we have:

initial formData
 const formData = { 
   title: "myTitle",
   asdf: 1
 }
 
const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: { type: "string", title: "Title"},
    name: { type: "string", title: "Name"},
  }
};
 

liveOmit will remove asfd because is not defined in the schema.

{ 
  title: "myTitle"
}

The problem that I've with RJSF after the 5.0.0-beta.19 version is that my formData is different after the initial mount.

initial formData
 const formData = { 
   title: "myTitle",
 }
 
const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: { type: "string", title: "Title"},
    name: { type: "string", title: "Name"},
  }
};

After mount the formData will be:

formData = { 
   title: "myTitle",
   name: undefined
 }

Theoretically:{ x: undefined } is the same as {}, but a deep comparison using lodash.isEqualWith or deequal will fail
because { title: 'Title 1'} and { title: 'Title 1', age: undefined} do not have the same properties.

I've also created a sample here: https://codesandbox.io/s/compare-objects-x3kwj4