id and for are missing from input and label when using dependencies

[edi9999]

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.

Description

In some cases, the rendered DOM doesn't have ids for some fields. This has two issues :

1. When clicking on the label, the input is not selected (since there is no binding between both)
2. In development we get following stacktrace :

Warning: Failed prop type: The prop `id` is marked as required in `BaseInput`, but its value is `undefined`.
    in BaseInput (created by TextWidget)
    in TextWidget
    in Unknown (created by StringField)
    in StringField (created by SchemaField)
    in div (created by DefaultTemplate)
    in DefaultTemplate (created by SchemaField)
    in SchemaField (created by ObjectField)
    in fieldset (created by DefaultObjectFieldTemplate)
    in DefaultObjectFieldTemplate (created by ObjectField)
    in ObjectField (created by SchemaField)
    in div (created by DefaultTemplate)
    in DefaultTemplate (created by SchemaField)
    in SchemaField (created by Form)
    in form (created by Form)
    in Form (created by cloudAccountAdd)

Steps to Reproduce

1. On the demo site : https://mozilla-services.github.io/react-jsonschema-form/
2. Set UISchema and formData to {}
3. Set JSONSchema to the following :

{
  "$schema": "http://json-schema.org/draft-06/schema#",
  "type": "object",
  "properties": {
    "connector": {
      "type": "string",
      "enum": [
        "aws",
        "gcp"
      ],
      "title": "Provider",
      "default": "aws"
    }
  },
  "dependencies": {
    "connector": {
      "oneOf": [
        {
          "type": "object",
          "properties": {
            "connector": {
              "type": "string",
              "enum": [
                "aws"
              ]
            },
            "key_aws": {
              "type": "string"
            }
          }
        },
        {
          "type": "object",
          "properties": {
            "connector": {
              "type": "string",
              "enum": [
                "gcp"
              ]
            },
            "key_gcp": {
              "type": "string"
            }
          }
        }
      ]
    }
  }
}

Expected behavior

I would expect to have a for= and an id= property on the input and label for key_aws and key_gcp

Actual behavior

No ids are present

See following GIF demosntrating the issue.

Version

1.0.0

[edi9999]

I still have this issue after updating to master.

It seems that this bug has not been fixed yet @redixhumayun

To reproduce, just run npm start after cloning the rjsf repository, then go to the "schema dependencies" demo, and enter something in the credit card input, you will see the same error

[jacklp]

still finding this issue, after trying a few different configurations I found that fields that are inside a fixed array inside the dependencies object are also not being rendered on the page.

Please publish to npm when this is resolved <3

[redixhumayun]

Hi, so I have a fix available for this by generating the idSchema in the ObjectField.js file. The reason I can't seem to do this in the Form.js file is because retrieveSchema seems to correctly set the new json schema only for the first level of a nested JSON object.

If you look at the following commit, I have added a second test to test_utils.js file within a describe.only block. Shouldn't this test be passing since retrieveSchema follows a recursive strategy to build a new schema object?

I have a potential fix, like I mentioned, in the Object.js file, however I am not sure this is a long term fix.

Was the original intention of the retrieveSchema function only to build the new schema one level deep? If so, maybe it would be better to refactor that function instead?

[jonathonlui]

@redixhumayun, I'd guess that generating the idSchema for the ObjectField inner fields is ok as it looks like ArrayField does something similar for its fields.

BTW, you're missing the formData argument in your toIdSchema call. I think it should be:

const newIdSchema = toIdSchema(schema, null, definitions, formData, idSchema["$id"]);

[redixhumayun]

@edi9999 Take a look and let me know if this works - #819

[jipd]

FYI: this bug only exists before a value is set for the element, once one has the id and htmlFor properties are available

[epicfaace]

This seems to be fixed in the latest version (see playground), so I'm closing this.

[edi9999]

Yes it works now !