Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`allOf` + `if/then/else` break when present at different levels.

See original GitHub issue

Prerequisites

[ x] I have read the documentation;
[ x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
[ x] Ideally, I’m providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

I tried to implement multiple if/then/else on nested objects.

While correctly working on nested objects, if I try to add a allOf on main object, this doesn’t work anymore.

Ex if you try to paste those schemas on the playground

allOf in nested object

Playground Link

{
  "type": "object",
  "properties": {
    "animal": {
      "enum": [
        "Cat",
        "Fish"
      ]
    },
    "venue": {
      "type": "object",
      "title": "Location",
      "properties": {
        "space": {
          "enum": ["inside", "outside"] ,
          "default": "outside"
        }
      },
      "allOf": [
        {
          "if": {"properties": {"space": {"const": "inside"}}},
          "then": {"properties": {"room": {"type": "string", "enum": ["bedroom", "living room"]}}}
        },
                {
          "if": {"properties": {"space": {"const": "outside"}}},
          "then": {"properties": {"room": {"type": "string", "enum": ["garden", "terrace"]}}}
        }
      ]
    }
  }
}

Still OK

allOf in main object

Playground link

{
  "type": "object",
  "properties": {
    "animal": {
      "enum": [
        "Cat",
        "Fish"
      ]
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "animal": {
            "const": "Cat"
          }
        }
      },
      "then": {
        "properties": {
          "food": {
            "type": "string",
            "enum": [
              "meat",
              "grass",
              "fish"
            ]
          }
        },
        "required": [
          "food"
        ]
      }
    },
    {
      "if": {
        "properties": {
          "animal": {
            "const": "Fish"
          }
        }
      },
      "then": {
        "properties": {
          "food": {
            "type": "string",
            "enum": [
              "insect",
              "worms"
            ]
          },
          "water": {
            "type": "string",
            "enum": [
              "lake",
              "sea"
            ]
          }
        },
        "required": [
          "food",
          "water"
        ]
      }
    },
    {
      "required": [
        "animal"
      ]
    }
  ]
}

NOT OK

allOf in both main and nested object

Playground link

{
  "type": "object",
  "properties": {
    "animal": {
      "enum": [
        "Cat",
        "Fish"
      ]
    },
    "venue": {
      "type": "object",
      "title": "Location",
      "properties": {
        "space": {
          "enum": ["inside", "outside"] ,
          "default": "outside"
        }
      },
      "allOf": [
        {
          "if": {"properties": {"space": {"const": "inside"}}},
          "then": {"properties": {"room": {"type": "string", "enum": ["bedroom", "living room"]}}}
        },
                {
          "if": {"properties": {"space": {"const": "outside"}}},
          "then": {"properties": {"room": {"type": "string", "enum": ["garden", "terrace"]}}}
        }
      ]
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "animal": {
            "const": "Cat"
          }
        }
      },
      "then": {
        "properties": {
          "food": {
            "type": "string",
            "enum": [
              "meat",
              "grass",
              "fish"
            ]
          }
        },
        "required": [
          "food"
        ]
      }
    },
    {
      "if": {
        "properties": {
          "animal": {
            "const": "Fish"
          }
        }
      },
      "then": {
        "properties": {
          "food": {
            "type": "string",
            "enum": [
              "insect",
              "worms"
            ]
          },
          "water": {
            "type": "string",
            "enum": [
              "lake",
              "sea"
            ]
          }
        },
        "required": [
          "food",
          "water"
        ]
      }
    },
    {
      "required": [
        "animal"
      ]
    }
  ]
}

Food and water doesn’t appear anymore :

Expected behavior

Conditional properties food and water should also appear when nested objects contains allOf

Version

    "@rjsf/bootstrap-4": "^3.2.1",
    "@rjsf/core": "^4.0.1",

Issue Analytics

State:
Created 2 years ago
Comments:9 (1 by maintainers)

Top GitHub Comments

1reaction

phazebroekcommented, Sep 30, 2022

Using @rjsf/core 4.2.0, I’m seeing the same error reported for the following schema:

{
  "type": "object",
  "properties": {
    "liminar": {
      "type": "boolean",
      "title": "Há liminar?",
      "default": false,
      "enum": [
        true,
        false
      ]
    },
    "prazo": {
      "type": "string",
      "format": "date",
      "readOnly": true
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "liminar": {
            "const": true
          }
        }
      },
      "then": {
        "properties": {
          "prazo": {
            "readOnly": false
          }
        },
        "required": [
          "prazo"
        ]
      }
    }
  ]
}

However, if we not define “prazo” beforehand, it works:

{
  "type": "object",
  "properties": {
    "liminar": {
      "title": "Há liminar?",
      "type": "boolean",
      "enum": [
        true,
        false
      ]
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "liminar": {
            "const": true
          }
        }
      },
      "then": {
        "properties": {
          "prazo": {
            "type": "string",
            "format": "date",
            "readOnly": false
          }
        },
        "required": [
          "prazo"
        ]
      },
      "else": {
        "properties": {
          "prazo": {
            "type": "string",
            "format": "date",
            "readOnly": true
          }
        }
      }
    }
  ]
}

The observed behaviour makes sense to me and is not a bug but a feature imho. It will try to “merge” the readOnly property. But since it’s already defined, the value from “then” is ignored / overruled. As an alternative, you still can define the field upfront, but specify the readOnly true/false in either the “then” and “else” sections like so:

{
  "type": "object",
  "properties": {
    "liminar": {
      "type": "boolean",
      "title": "Há liminar?",
      "default": false,
      "enum": [
        true,
        false
      ]
    },
    "prazo": {
      "type": "string",
      "format": "date"
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "liminar": {
            "const": true
          }
        }
      },
      "then": {
        "properties": {
          "prazo": {
            "readOnly": false
          }
        },
        "required": [
          "prazo"
        ]
      },
      "else": {
        "properties": {
          "prazo": {
            "readOnly": true
          }
        }
      }
    }
  ]
}

1reaction

kfcaiocommented, Sep 12, 2022

Using @rjsf/core 4.2.0, I’m seeing the same error reported for the following schema:

{
  "type": "object",
  "properties": {
    "liminar": {
      "type": "boolean",
      "title": "Há liminar?",
      "default": false,
      "enum": [
        true,
        false
      ]
    },
    "prazo": {
      "type": "string",
      "format": "date",
      "readOnly": true
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "liminar": {
            "const": true
          }
        }
      },
      "then": {
        "properties": {
          "prazo": {
            "readOnly": false
          }
        },
        "required": [
          "prazo"
        ]
      }
    }
  ]
}

However, if we not define “prazo” beforehand, it works:

{
  "type": "object",
  "properties": {
    "liminar": {
      "title": "Há liminar?",
      "type": "boolean",
      "enum": [
        true,
        false
      ]
    }
  },
  "allOf": [
    {
      "if": {
        "properties": {
          "liminar": {
            "const": true
          }
        }
      },
      "then": {
        "properties": {
          "prazo": {
            "type": "string",
            "format": "date",
            "readOnly": false
          }
        },
        "required": [
          "prazo"
        ]
      },
      "else": {
        "properties": {
          "prazo": {
            "type": "string",
            "format": "date",
            "readOnly": true
          }
        }
      }
    }
  ]
}