react-jsonschema-form icon indicating copy to clipboard operation
react-jsonschema-form copied to clipboard

Weird Json Schema oneOf behavior in RJSF

Open msharikhmarex opened this issue 10 months ago • 8 comments

Prerequisites

What theme are you using?

material-ui

Version

5.x

Current Behavior

I have the following schema which is rendered using react-jsonschema-forms framework. Link to playground here

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "definitions": {
    "XXXType": {
      "title": "XXXX",
      "type": "object",
      "properties": {
        "sourceType": {
          "type": "string",
          "enum": [
            "Xxxxx"
          ],
          "default": "Xxxxx"
        },
        "folioInstrumentFilter": {
          "type": "array",
          "items": {
            "type": "string"
          }
        },
        "folios": {
          "type": "array",
          "items": {
            "type": "integer"
          }
        },
        "xxxxxTradeIds": {
          "type": "array",
          "items": {
            "type": "integer"
          }
        }
      },
      "additionalProperties": false,
      "required": [
        "sourceType"
      ]
    },
    "YYYYType": {
      "title": "YYYY",
      "type": "object",
      "properties": {
        "instrumentTypes": {
          "type": "array",
          "items": {
            "type": "string"
          },
          "minItems": 1
        },
        "books": {
          "type": "array",
          "items": {
            "type": "string"
          }
        },
        "tradeLegIds": {
          "type": "array",
          "items": {
            "type": "integer"
          }
        }
      },
      "required": [
        "instrumentTypes"
      ],
      "additionalProperties": false
    }
  },
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 50
    },
    "portfolio": {
      "type": "object",
      "oneOf": [
        {
          "properties": {
            "name": {
              "type": "string",
              "enum": [
                "Name 1",
                "Name 2",
                "Name 3",
                "Name 4"
              ]
            }
          },
          "required": [
            "name"
          ]
        },
        {
          "type": "object",
          "properties": {
            "custom": {
              "oneOf": [
                {
                  "$ref": "#/definitions/XXXType"
                },
                {
                  "$ref": "#/definitions/YYYYType"
                }
              ]
            }
          },
          "required": [
            "custom"
          ]
        }
      ]
    }
  },
  "required": [
    "portfolio",
    "name"
  ],
  "additionalProperties": false
}

Change the DropDown in the form (as shown in the image between XXXX and YYYY

The form seems to fail validation in rjsf especially when I switch the inner oneOf between the XxxxxType and YyyyyType definition. It always complains that it doesn't match between one of the two schemas and must have required property 'name'. I have tried different permutations of RJSF options and nothing seems to work.

Also tried discriminating using "if" that that didn't work. I have spent a lot of time trying to figure this out and I can't figure out the issue. Your help is much appreciated. Note that moving the inner oneOf to top level (removing the nesting) makes it work (see link in "expected behaviour").

Expected Behavior

I have tried moving the inner oneOf at the top level see playground and it works as expected.

Expecting the input to stay valid when switching between the inner oneOf definitions.

Steps To Reproduce

Go to playground... select "XXXXX" for second dropdown (UI is valid). Change the drop down to "YYYY" you will get errors image

I have attached an animated GIF to show how to reproduce.

Note that

  • Selecting XXXX after selecting Option 1 creates correct Json and is valid.
  • Switching to YYYY causes validation error (schema selection for oneOf).
  • Switching back to XXXX completely removes the element Json and fail validation.

Image

Environment

- OS: Windows 10
- Node: 20.18.1
- npm:10.8.2

Anything else?

No response

msharikhmarex avatar Jan 14 '25 09:01 msharikhmarex