React-jsonschema-form: Optional object with required fields in react-jsonschema-form

[davidMcneil]

Prerequisites

• [x] I have read the documentation;
• [X] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

Given a json schema like the one below, the react-jsonschema-form validator essentially requires both shipping_address and billing_address even though the billing_address is not listed as required. This is because the address type requires all three of its properties. How can I make the billing_address optional?

{
  "definitions": {
    "address": {
      "type": "object",
      "properties": {
        "street_address": {
          "type": "string"
        },
        "city": {
          "type": "string"
        },
        "state": {
          "type": "string"
        }
      },
      "required": [
        "street_address",
        "city",
        "state"
      ]
    }
  },
  "type": "object",
  "properties": {
    "billing_address": {
      "title": "Billing address",
      "$ref": "#/definitions/address"
    },
    "shipping_address": {
      "title": "Shipping address",
      "$ref": "#/definitions/address"
    }
  },
  "required": [
    "shipping_address"
  ]
}

Steps to Reproduce

Here is a link to the react-jsonschema-form playground.

Expected behavior

It seems that react-jsonschema-form should simply no submit billing_address if not all of its address properties are filled in.

Actual behavior

The form validator prevents the form from being submitted.

Version

0.49.0

[n1k0]

I'm surprised with this behavior too, and the jsonschema lib is not at fault here as validating raw data works just as expected. We may be altering the schema in some way, which is bad.

[gdbassett]

Has this fix been merged? If not, is there a target for merging it? My org has started using the plugin but are getting lots of invalid data due to turning off validation due to required fields within non-required objects.

[davidMcneil]

This has not been merged. There are a few outstanding issues that need to be worked through. You can see the discussion at the merge request (https://github.com/mozilla-services/react-jsonschema-form/pull/682). Unfortunately, I do not have time to cleanup the issues that need to be worked through in the immediate future. I am sure that if these issues were addressed the fix would be quickly merged.

[christianblos]

Any news on this one?

[christianblos]

If someone else comes across this issue and can not wait for a real fix, you can extend the Form component and override the validate function. Here's an example in Typescript:

class ReactJsonSchemaForm<T> extends Form<T> {
    validate(formData: any, schema: any) {
        formData = removeOptionalEmptyValues(formData, this.props.schema);
        //@ts-ignore
        return super.validate(formData, schema);
    }
}

removeOptionalEmptyValues() is a function I created to remove objects from formData if their values are empty. Don't forget to call removeOptionalEmptyValues() on onSubmit as well.

[epicfaace]

Playground link

Part of the problem here is that 1) when all the shipping address fields are set to be blank, shipping_address is set to {} in the formData -- shipping_address does not disappear altogether.
And given this schema:

{
  "definitions": {
    "address": {
      "type": "object",
      "properties": {
        "street_address": {
          "type": "string"
        },
        "city": {
          "type": "string"
        },
        "state": {
          "type": "string"
        }
      },
      "required": [
        "street_address",
        "city",
        "state"
      ]
    }
  },
  "type": "object",
  "properties": {
    "billing_address": {
      "title": "Billing address",
      "$ref": "#/definitions/address"
    },
    "shipping_address": {
      "title": "Shipping address",
      "$ref": "#/definitions/address"
    }
  },
  "required": [
    "billing_address"
  ]
}

The following schema is not valid:

{
  "billing_address": {
    "street_address": "asd",
    "city": "Babel",
    "state": "Neverland"
  },
  "shipping_address": {},
  "tree": {
    "name": "root",
    "children": [
      {
        "name": "leaf"
      }
    ]
  }
}

Whereas only the _following_ schema is valid:

{
  "billing_address": {
    "street_address": "asd",
    "city": "Babel",
    "state": "Neverland"
  },
  "tree": {
    "name": "root",
    "children": [
      {
        "name": "leaf"
      }
    ]
  }
}

And the second problem is the same as mentioned above; even when the key shipping_address is removed from the formData, the fields still highlight as red / required.

[psehgal]

Any updates with this? I am running into the same issue.

[afernandez8]

Hello, any updates with this? I am running into the same issue. And i can't fix with this: https://github.com/rjsf-team/react-jsonschema-form/issues/675#issuecomment-387703564

[vonElfvin]

A workaround I went with:

const formatInitialFormData = (
  initialFormData: Record<string, unknown>,
  schema: JSONSchema7,
): Record<string, unknown> => {
  const properties = schema.properties!
  const formData = { ...initialFormData }
  Object.entries(properties).forEach((property) => {
    const key = property[0]
    const value = property[1] as JSONSchema7
    formData[key] = initialFormData[key] ?? value?.default ?? undefined
  })
  return formData
}

Consumed by:

  const [formData, setFormData] = useState(formatInitialFormData(initialFormData ?? {}, schema))

  ...

  <Form
     formData={formData}
   ...
  />

It is not perfect for all use cases but does the trick for me.