react-jsonschema-form: Fields are still flagging as required even if the OneOf conditional returns false

Prerequisites

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

My form is quite complex and features many select boxes with OneOf dependencies. However even when one of them is attributed to false (i.e. no other fields are dependent on the selected option) the form still throws an error thinking that the fields only displayed for another option are still required to continue the form.

Steps to Reproduce

Create a select box with a OneOf dependency
Choose an option that requires another set of values to be filled and required

Expected behavior

The required fields should be ignored if the dependent option is NOT chosen previously.

Actual behavior

Form throws an error thinking that the fields are required even though they are not visible.

Version

1.0.4

Here is a snippet of the JSON I used to determine which fields are required when a specific option is chosen:

"1.11": {
          "type": "object",
          "title": "",
          "properties": {
            "1.11.1": {
              "type": "string",
              "title": "Are you acting on behalf of the PLH (e.g. the agent)",
              "default": "No",
              "enum": [
                "No",
                "Yes"
              ]
            }
          },
          "dependencies": {
            "1.11.1": {
              "oneOf": [
                {
                  "properties": {
                    "1.11.1": {
                      "enum": [
                        "No"
                      ]
                    }
                  }
                },
                {
                  "properties": {
                    "1.11.1": {
                      "enum": [
                        "Yes"
                      ]
                    },
                    "1.11.2": {
                      "type": "object",
                      "title": "Other Proposed License Holder (PLH) Details",
                      "properties": {}
                    },
                    "1.11.3": {
                      "type": "object",
                      "title": "",
                      "description": "If this application is being dealt with by a person who is not the PLH, please provide contact details below.",
                      "required": [
                        "1.11.3.1"
                      ],
                      "properties": {
                        "1.11.3.1": {
                          "type": "string",
                          "title": "Name"
                        },
....

In the schema.json:

"1.11": {
      "1.11.1": {
        "ui:widget": "selectBoxWidget"
      },

As you can see, if “Yes” is chosen on the select option, the field 1.11.3.1 (name) is required. However, this should be completely irrelevant if the user chooses “No” on the select box, but the schema still clocks it as "required’.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17 (5 by maintainers)

Most upvoted comments

Here is how I solved the issue. Might be helpful to anyone else facing it.

Basically, two approaches can be taken here:

Approach One:-

Make sure that each branch object in the 'oneOf' tree has a 'required' property. Put 'required: []' if nothing is a must have for that tree branch.

Approach Two:-

Remove 'required' from all the branches, and move them in an 'if else' based 'Ajv' condition, eg:

      "if": {
          "properties": {
            "SomeProp": {
              "enum": ["propValueOne"]
            }
          }
        },
        "then": {
          "required": [
            "propOne",
            "propTwo",
          ]
        },
        "else": {
          "required": [ ],
        }

https://ajv.js.org/keywords.html#ifthenelse

Along with this, using ‘not’ keyword (Ajv lib) will be super handy for cases where approach One is suitable.

Thanks!

KKS1 on Sep 14, 2019

No updates since then, although contributions are welcome to fix the issue.

epicfaace on Sep 12, 2019

In general, just to explain you better my thoughts, I see from you example oneOf the behaviour is from the user’s perspective wierd.

oneof

As a user who does not select the option 2, I would rather not be interested in getting a validation error for a require field which I do not even see (ipsum), but just the filed I see (for lorem indeed). I only would like to get validation errors for the form I have in front of me. Forking the repo and trying to debug your code, I also noticed that the MultiSchemaField class (AnyOfField component) is responsible for handling both anyOf and oneOf constructs… which gives me some feeling that at the moment the case I am discussing is not maybe handled … correct me please if I am wrong… or if I am not giving to the schema the correct structure…

Thanks in advance for replying

fabri86 on Feb 5, 2019