Use `enum` to populate dropdown list for object key

[anders-kiaer]

Prerequisites

• I have read the documentation

What theme are you using?

N/A

Is your feature request related to a problem? Please describe.

We have the following JSON schema structure:

{
  "additionalProperties": {
    "type": "string"
  },
  "propertyNames": {
    "enum": [
      "a",
      "b",
      "c",
      "d"
    ]
  },
  "type": "object"
}

The object keys have an enumerated list of allowed values.

react-jsonschema-form picks this enum correctly up in the validation:

However, as an end user it is difficult to understand from the generated user interface what is wrong, and what the allowed values are.

Describe the solution you'd like

When key is an enum with a defined list of allowed values, show it as a dropdown instead of a text input field, in order to support the user in filling in valid values.

Describe alternatives you've considered

Add the allowed values in the enum to the field description, such that the user have it documented. However, this has the risk of the description and the JSON schema enum field getting out of sync, and in addition it is quicker for the user to select a valid value from dropdown instead of parsing the description, and writing in a valid string.

[nickgros]

We can't do a lot about the unhelpful error message as that comes from the validator. Updating the key input to use a different widget if propertyNames describes an enum is a good idea!

Right now (at least in @rjsf/core), this field is just an input element hard-coded in the WrapIfAdditionalTemplate. Maybe we should see if propertyNames is defined and pass that schema to a new SchemaField that controls the key? Also, the logic to create the Key field would ideally be captured in a Field (so all themes would benefit) instead of living in this template.

[heath-freenome]

@anders-kiaer As @nickgros pointed out, we need to enhance our code to handle this interesting use case. Are you willing to provide a PR for it?