react-jsonschema-form dependencies is beeing added to the end of the form

Question

I am trying to use react-jsonschema-form, and I need to do some dependencies, and the problem I have is following. The field that is being rendered conditionally is added to the end of form and not after the field that is calling that condition.

{
  "title": "Person",
  "type": "object",
  "properties": {
    "Do you have any pets?": {
      "type": "string",
      "enum": [
        "No",
        "Yes: One",
        "Yes: More than one"
      ],
      "default": "No"
    },
    "Test?": {
      "type": "string"
    }
  },
  "required": [
    "Do you have any pets?"
  ],
  "dependencies": {
    "Do you have any pets?": {
      "oneOf": [
        {
          "properties": {
            "Do you have any pets?": {
              "enum": [
                "No"
              ]
            }
          }
        },
        {
          "properties": {
            "Do you have any pets?": {
              "enum": [
                "Yes: One"
              ]
            },
            "How old is your pet?": {
              "type": "number"
            }
          },
          "required": [
            "How old is your pet?"
          ]
        },
        {
          "properties": {
            "Do you have any pets?": {
              "enum": [
                "Yes: More than one"
              ]
            },
            "Do you want to get rid of any?": {
              "type": "boolean"
            }
          },
          "required": [
            "Do you want to get rid of any?"
          ]
        }
      ]
    }
  }
}

But I think it should be added right after the field of dependency.

Sandbox https://rjsf-team.github.io/react-jsonschema-form/

Answer 1

I had the same expectation (and problem).

You can have the conditioning-field & dependencies nested under a container object (with an empty title).

Try the following in the sandbox:

{
  "title": "Person",
  "type": "object",
  "properties": {
    "containerObject": {
      "title": "",
      "type": "object",
      "properties": {
        "Do you have any pets?": {
          "type": "string",
          "enum": [
            "No",
            "Yes: One",
            "Yes: More than one"
          ],
          "default": "No"
        }
      },
      "required": [
        "Do you have any pets?"
      ],
      "dependencies": {
        "Do you have any pets?": {
          "oneOf": [
            {
              "properties": {
                "Do you have any pets?": {
                  "enum": ["No"]
                }
              }
            },
            {
              "properties": {
                "Do you have any pets?": {
                  "enum": ["Yes: One"]
                },
                "How old is your pet?": {
                  "type": "number"
                }
              },
              "required": [
                "How old is your pet?"
              ]
            },
            {
              "properties": {
                "Do you have any pets?": {
                  "enum": ["Yes: More than one"]
                },
                "Do you want to get rid of any?": {
                  "type": "boolean"
                }
              },
              "required": [
                "Do you want to get rid of any?"
              ]
            }
          ]
        }
      }
    },
    "Test?": { "type": "string" }
  }
}

Answer 2

I guess I'm a few years late to the party, but if anyone stumbles across this, there's an option in the Uischema, ui:order, that you can use to specify which order you'd like the fields to show up in. Its important to note that you must include every field in your form in this list, unless you use the wildcard.

{
   "ui:order": ["Do you have any pets?", "How old is your pet?", "Do you want to get rid of any?", "Test?"]
}

Here's the link to the documentation.