Render options in select box based on the other property value set in react-jsonschema-form

48 views Asked by At

we are trying out https://react-jsonschema-form and what we need to do is:

    {
    "definitions": {
        "languages": {
            "enum": [
                "en",
                "es",
                "de"
            ]
        }
    },
    "title": "Configuration",
    "type": "object",
    "properties": {
        "language": {
            "title": "Language",
            "type": "object",
            "required": [
                "list",
                "default"
            ],
            "properties": {
                "list": {
                    "title": "Languages",
                    "description": "Specify languages",
                    "type": "array",
                    "items": {
                        "type": "string",
                        "$ref": "#/definitions/languages",
                        "default": [
                            "en"
                        ]
                    },
                    "uniqueItems": true
                },
                "default": {
                    "title": "Default Language",
                    "description": "Specify default language",
                    "type": "string",
                    "$ref": "#/definitions/languages",
                    "default": "en"
                }
            }
        }
    }
}

So, in the 2nd select box ("default") we would like to have only languages selected in the 1st select box ("list"). For example, if user selected ["en", "es"] these 2 languages should appear in second select box, not the 3rd one available in enum ("de")

Could someone provide a pointer on how to achieve that? Do we need a custom select widget?

Any example implementation?

Thanks

0

There are 0 answers