anyOf/oneOf with Discriminated Unions + Null doesn't work

[guilhermedelyra]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

When using a JSON Schema that combines a discriminated union with null using anyOf, the form does not render the discriminated union options correctly. Instead, it only allows selecting the null option, and the expected fields for the other options are not displayed.

Expected Behavior

The form should correctly render the options from the discriminated union alongside the null option, allowing users to select any of the available types or null.

Steps To Reproduce

1. Use the following JSON Schema in the react-jsonschema-form playground or your environment:

Failing Json Schema

playground

{
  "$defs": {
    "LogitechMouse": {
      "additionalProperties": false,
      "properties": {
        "name": {
          "default": "Logitech Mouse",
          "title": "Name",
          "type": "string"
        },
        "price": {
          "default": 10.0,
          "title": "Price",
          "type": "number"
        },
        "type": {
          "const": "peripheral",
          "default": "peripheral",
          "enum": [
            "peripheral"
          ],
          "title": "Type",
          "type": "string"
        },
        "kind": {
          "const": "mouse",
          "default": "mouse",
          "enum": [
            "mouse"
          ],
          "title": "Kind",
          "type": "string"
        },
        "max_dpi": {
          "default": 600,
          "title": "Max Dpi",
          "type": "integer"
        },
        "brand": {
          "const": "Logitech",
          "default": "Logitech",
          "enum": [
            "Logitech"
          ],
          "title": "Brand",
          "type": "string"
        }
      },
      "title": "LogitechMouse",
      "type": "object"
    },
    "RazerMouse": {
      "additionalProperties": false,
      "properties": {
        "name": {
          "default": "Razer Mouse",
          "title": "Name",
          "type": "string"
        },
        "price": {
          "default": 20.0,
          "title": "Price",
          "type": "number"
        },
        "type": {
          "const": "peripheral",
          "default": "peripheral",
          "enum": [
            "peripheral"
          ],
          "title": "Type",
          "type": "string"
        },
        "kind": {
          "const": "mouse",
          "default": "mouse",
          "enum": [
            "mouse"
          ],
          "title": "Kind",
          "type": "string"
        },
        "max_dpi": {
          "default": 1200,
          "title": "Max Dpi",
          "type": "integer"
        },
        "brand": {
          "const": "Razer",
          "default": "Razer",
          "enum": [
            "Razer"
          ],
          "title": "Brand",
          "type": "string"
        }
      },
      "title": "RazerMouse",
      "type": "object"
    }
  },
  "properties": {
    "components": {
      "anyOf": [
        {
          "discriminator": {
            "mapping": {
              "Logitech": "#/$defs/LogitechMouse",
              "Razer": "#/$defs/RazerMouse"
            },
            "propertyName": "brand"
          },
          "oneOf": [
            {
              "$ref": "#/$defs/LogitechMouse"
            },
            {
              "$ref": "#/$defs/RazerMouse"
            }
          ],
          "title": "AvailableMouses"
        },
        {
          "type": "null"
        }
      ],
      "title": "Components"
    }
  },
  "required": [
    "components"
  ],
  "title": "Computer",
  "type": "object"
}

2. Render the form (https://rjsf-team.github.io/react-jsonschema-form/)
3. Attempt to select options other than null for the components field.
4. Observe that only the null option is selectable, and the discriminated union options are not available.

To prove that the discriminated union is not the problem, here's the same json without combining it with the null option:

Working Json Schema

[playground](https://rjsf-team.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJjb21wb25lbnRzIjp7Im5hbWUiOiJMb2dpdGVjaCBNb3VzZSIsInByaWNlIjoxMCwidHlwZSI6InBlcmlwaGVyYWwiLCJraW5kIjoibW91c2UiLCJtYXhfZHBpIjo2MDAsImJyYW5kIjoiTG9naXRlY2gifX0sInNjaGVtYSI6eyIkZGVmcyI6eyJMb2dpdGVjaE1vdXNlIjp7ImFkZGl0aW9uYWxQcm9wZXJ0aWVzIjpmYWxzZSwicHJvcGVydGllcyI6eyJuYW1lIjp7ImRlZmF1bHQiOiJMb2dpdGVjaCBNb3VzZSIsInRpdGxlIjoiTmFtZSIsInR5cGUiOiJzdHJpbmcifSwicHJpY2UiOnsiZGVmYXVsdCI6MTAsInRpdGxlIjoiUHJpY2UiLCJ0eXBlIjoibnVtYmVyIn0sInR5cGUiOnsiY29uc3QiOiJwZXJpcGhlcmFsIiwiZGVmYXVsdCI6InBlcmlwaGVyYWwiLCJlbnVtIjpbInBlcmlwaGVyYWwiXSwidGl0bGUiOiJUeXBlIiwidHlwZSI6InN0cmluZyJ9LCJraW5kIjp7ImNvbnN0IjoibW91c2UiLCJkZWZhdWx0IjoibW91c2UiLCJlbnVtIjpbIm1vdXNlIl0sInRpdGxlIjoiS2luZCIsInR5cGUiOiJzdHJpbmcifSwibWF4X2RwaSI6eyJkZWZhdWx0Ijo2MDAsInRpdGxlIjoiTWF4IERwaSIsInR5cGUiOiJpbnRlZ2VyIn0sImJyYW5kIjp7ImNvbnN0IjoiTG9naXRlY2giLCJkZWZhdWx0IjoiTG9naXRlY2giLCJlbnVtIjpbIkxvZ2l0ZWNoIl0sInRpdGxlIjoiQnJhbmQiLCJ0eXBlIjoic3RyaW5nIn19LCJ0aXRsZSI6IkxvZ2l0ZWNoTW91c2UiLCJ0eXBlIjoib2JqZWN0In0sIlJhemVyTW91c2UiOnsiYWRkaXRpb25hbFByb3BlcnRpZXMiOmZhbHNlLCJwcm9wZXJ0aWVzIjp7Im5hbWUiOnsiZGVmYXVsdCI6IlJhemVyIE1vdXNlIiwidGl0bGUiOiJOYW1lIiwidHlwZSI6InN0cmluZyJ9LCJwcmljZSI6eyJkZWZhdWx0IjoyMCwidGl0bGUiOiJQcmljZSIsInR5cGUiOiJudW1iZXIifSwidHlwZSI6eyJjb25zdCI6InBlcmlwaGVyYWwiLCJkZWZhdWx0IjoicGVyaXBoZXJhbCIsImVudW0iOlsicGVyaXBoZXJhbCJdLCJ0aXRsZSI6IlR5cGUiLCJ0eXBlIjoic3RyaW5nIn0sImtpbmQiOnsiY29uc3QiOiJtb3VzZSIsImRlZmF1bHQiOiJtb3VzZSIsImVudW0iOlsibW91c2UiXSwidGl0bGUiOiJLaW5kIiwidHlwZSI6InN0cmluZyJ9LCJtYXhfZHBpIjp7ImRlZmF1bHQiOjEyMDAsInRpdGxlIjoiTWF4IERwaSIsInR5cGUiOiJpbnRlZ2VyIn0sImJyYW5kIjp7ImNvbnN0IjoiUmF6ZXIiLCJkZWZhdWx0IjoiUmF6ZXIiLCJlbnVtIjpbIlJhemVyIl0sInRpdGxlIjoiQnJhbmQiLCJ0eXBlIjoic3RyaW5nIn19LCJ0aXRsZSI6IlJhemVyTW91c2UiLCJ0eXBlIjoib2JqZWN0In19LCJwcm9wZXJ0aWVzIjp7ImNvbXBvbmVudHMiOnsiZGlzY3JpbWluYXRvciI6eyJtYXBwaW5nIjp7IkxvZ2l0ZWNoIjoiIy8kZGVmcy9Mb2dpdGVjaE1vdXNlIiwiUmF6ZXIiOiIjLyRkZWZzL1JhemVyTW91c2UifSwicHJvcGVydHlOYW1lIjoiYnJhbmQifSwib25lT2YiOlt7IiRyZWYiOiIjLyRkZWZzL0xvZ2l0ZWNoTW91c2UifSx7IiRyZWYiOiIjLyRkZWZzL1JhemVyTW91c2UifV0sInRpdGxlIjoiQXZhaWxhYmxlTW91c2VzIn19LCJyZXF1aXJlZCI6WyJjb21wb25lbnRzIl0sInRpdGxlIjoiQ29tcHV0ZXIiLCJ0eXBlIjoib2JqZWN0In0sInVpU2NoZW1hIjp7fSwidGhlbWUiOiJkZWZhdWx0IiwibGl2ZVNldHRpbmdzIjp7InNob3dFcnJvckxpc3QiOiJ0b3AiLCJleHBlcmltZW50YWxfZGVmYXVsdEZvcm1TdGF0ZUJlaGF2aW9yIjp7ImFycmF5TWluSXRlbXMiOnsicG9wdWxhdGUiOiJwb3B1bGF0ZSIsIm1lcmdlRXh0cmFEZWZhdWx0cyI6ZmFsc2V9LCJhbGxPZiI6InNraXBEZWZhdWx0cyIsImNvbnN0QXNEZWZhdWx0cyI6ImFsd2F5cyIsImVtcHR5T2JqZWN0RmllbGRzIjoicG9wdWxhdGVBbGxEZWZhdWx0cyIsIm1lcmdlRGVmYXVsdHNJbnRvRm9ybURhdGEiOiJ1c2VGb3JtRGF0YUlmUHJlc2VudCJ9fX0=)

{
  "$defs": {
    "LogitechMouse": {
      "additionalProperties": false,
      "properties": {
        "name": {
          "default": "Logitech Mouse",
          "title": "Name",
          "type": "string"
        },
        "price": {
          "default": 10.0,
          "title": "Price",
          "type": "number"
        },
        "type": {
          "const": "peripheral",
          "default": "peripheral",
          "enum": [
            "peripheral"
          ],
          "title": "Type",
          "type": "string"
        },
        "kind": {
          "const": "mouse",
          "default": "mouse",
          "enum": [
            "mouse"
          ],
          "title": "Kind",
          "type": "string"
        },
        "max_dpi": {
          "default": 600,
          "title": "Max Dpi",
          "type": "integer"
        },
        "brand": {
          "const": "Logitech",
          "default": "Logitech",
          "enum": [
            "Logitech"
          ],
          "title": "Brand",
          "type": "string"
        }
      },
      "title": "LogitechMouse",
      "type": "object"
    },
    "RazerMouse": {
      "additionalProperties": false,
      "properties": {
        "name": {
          "default": "Razer Mouse",
          "title": "Name",
          "type": "string"
        },
        "price": {
          "default": 20.0,
          "title": "Price",
          "type": "number"
        },
        "type": {
          "const": "peripheral",
          "default": "peripheral",
          "enum": [
            "peripheral"
          ],
          "title": "Type",
          "type": "string"
        },
        "kind": {
          "const": "mouse",
          "default": "mouse",
          "enum": [
            "mouse"
          ],
          "title": "Kind",
          "type": "string"
        },
        "max_dpi": {
          "default": 1200,
          "title": "Max Dpi",
          "type": "integer"
        },
        "brand": {
          "const": "Razer",
          "default": "Razer",
          "enum": [
            "Razer"
          ],
          "title": "Brand",
          "type": "string"
        }
      },
      "title": "RazerMouse",
      "type": "object"
    }
  },
  "properties": {
    "components": {
      "discriminator": {
        "mapping": {
          "Logitech": "#/$defs/LogitechMouse",
          "Razer": "#/$defs/RazerMouse"
        },
        "propertyName": "brand"
      },
      "oneOf": [
        {
          "$ref": "#/$defs/LogitechMouse"
        },
        {
          "$ref": "#/$defs/RazerMouse"
        }
      ],
      "title": "AvailableMouses"
    }
  },
  "required": [
    "components"
  ],
  "title": "Computer",
  "type": "object"
}

Environment

-- using the live-playground (same behavior happens running locally) --

OS: Ubuntu 22.04.2 LTS on Windows 10 x86_64
Node: v20.5.0
npm: 9.8.0

Anything else?

Off-topic: I'm using Pydantic (version 2.9.2) to generate those Json-Schemas; here's the code:

Pydantic Code

from pydantic import BaseModel, Field, ConfigDict
from typing import Annotated, Literal, Union

class BaseProduct(BaseModel):
    name: str
    price: float

class BaseHardware(BaseProduct):
    type: Literal["hardware"] = "hardware"

class BasePeripheral(BaseProduct):
    type: Literal["peripheral"] = "peripheral"

class BaseMouseProduct(BasePeripheral):
    kind: Literal["mouse"] = "mouse"
    max_dpi: int

class LogitechMouse(BaseMouseProduct):
    model_config = ConfigDict(extra="forbid")

    brand: Literal["Logitech"] = "Logitech"
    name: str = Field("Logitech Mouse")
    max_dpi: int = Field(600)
    price: float = Field(10.0)

class RazerMouse(BaseMouseProduct):
    model_config = ConfigDict(extra="forbid")

    brand: Literal["Razer"] = "Razer"
    name: str = Field("Razer Mouse")
    max_dpi: int = Field(1200)
    price: float = Field(20.0)

AvailableMouses = Annotated[
    Union[LogitechMouse, RazerMouse],
    Field(title="AvailableMouses", discriminator="brand")
]

class Computer(BaseModel):
    components: Union[AvailableMouses, None]


if __name__ == "__main__":
    print(Computer.schema_json(indent=2))

[guilhermedelyra]

Another point i've noticed is:

• the order of the mappings influence on the fields being selected (nothing wrong with that, just evidenciating this behavior);

Example

• Valid:

"properties": {
    "components": {
      "discriminator": {
        "mapping": {
          "Logitech": "#/$defs/LogitechMouse",
          "Razer": "#/$defs/RazerMouse"
        },
        "propertyName": "brand"
      },
      "oneOf": [
        {
          "$ref": "#/$defs/LogitechMouse"
        },
        {
          "$ref": "#/$defs/RazerMouse"
        }
      ],
      "title": "AvailableMouses"
    }
  }

• Invalid (results in buggy interface):

"properties": {
    "components": {
      "discriminator": {
        "mapping": {
          "Logitech": "#/$defs/LogitechMouse",
          "Razer": "#/$defs/RazerMouse" <-------
        },
        "propertyName": "brand"
      },
      "oneOf": [
        {
          "$ref": "#/$defs/RazerMouse"  <--------
        },
        {
          "$ref": "#/$defs/LogitechMouse"
        }
      ],
      "title": "AvailableMouses"
    }
  }