Conditional enum entries don't update.

[VinzSpring]

I am trying to model a form which lets the user choose a category for the type of list items to create and then only shows the items which belong to this category.

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "object",
    "properties": {
        "meta": {
            "type": "object",
            "properties": {
                "reloadConfigInMinutes": {
                    "type": "integer",
                    "default": 60
                }
            },
            "required": [
                "reloadConfigInMinutes"
            ]
        },
        "modules": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "category": {
                        "type": "string",
                        "enum": [
                            "category1",
                            "category2"
                        ]
                    }
                },
                "required": [
                    "category"
                ],
                "allOf": [
                    {
                        "if": {
                            "properties": {
                                "category": {
                                    "const": "category1"
                                }
                            },
                            "required": [
                                "category"
                            ]
                        },
                        "then": {
                            "properties": {
                                "type": {
                                    "enum": [
                                        "contentItems",
                                        "timeTerminal"
                                    ]
                                }
                            }
                        }
                    },
                    {
                        "if": {
                            "properties": {
                                "category": {
                                    "const": "category2"
                                }
                            },
                            "required": [
                                "category"
                            ]
                        },
                        "then": {
                            "properties": {
                                "type": {
                                    "enum": [
                                        "contentItems"
                                    ]
                                }
                            }
                        }
                    },
                    {
                        "if": {
                            "properties": {
                                "type": {
                                    "const": "contentItems"
                                }
                            },
                            "required": [
                                "type"
                            ]
                        },
                        "then": {
                            "properties": {
                                "icon": {
                                    "const": "navi_calendar"
                                },
                                "navTitle": {
                                    "type": "string"
                                },
                                "title": {
                                    "type": "string"
                                }
                            },
                            "required": [
                                "icon",
                                "navTitle",
                                "title"
                            ]
                        }
                    },
                    {
                        "if": {
                            "properties": {
                                "type": {
                                    "const": "timeTerminal"
                                }
                            },
                            "required": [
                                "type"
                            ]
                        },
                        "then": {
                            "properties": {
                                "icon": {
                                    "const": "navi_timer"
                                },
                                "title": {
                                    "type": "string"
                                }
                            },
                            "required": [
                                "icon",
                                "title"
                            ]
                        }
                    }
                ]
            }
        }
    },
    "required": [
        "meta",
        "modules"
    ]
}

It kind of works but the second drop down does not display the right contents. Weirdly validation works as expected.

Both only show same options:

Validation works as expected:

How can I make it so, that the second drop down only shows the allowed entries? I am using V3.0.0.

[sdirix]

Hi @VinzSpring,

While validation works because of the integrated AJV library, we don't offer a UI by default which allows this kind of dynamism.

You should be able to construct a UI schema using rules which works as you expect, i.e. hiding and showing the currently relevant fields.

Instead of using such a UI schema you can also implement a custom renderer which is able to evaluate the if/then/else constructs and dispatches to the corresponding controls and/or sets them (in)visible.

[sdirix]

For future questions please use the forum.