By default rjsf renders array items as separate fields on the form. So, for example, this schema/layout:

 "jsonSchema" : {
    "type" : "object",
    "required" : [ "test field" ],
    "properties" : {
      "test field" : {
        "title" : "test field",
        "type" : "array",
        "items" : {
          "type" : "string"
        }
      }
    }
  },
  "jsonLayout" : {
    "ui:order" : [ "test field" ],
    "test field" : {
      "ui:widget" : "text_multi",
      "items" : {
        "ui:widget" : "text_multi"
      },
      "ui:disabled" : false,
      "ui:options" : { }
    }
  }

Will render each string item on its own line together with add,remove,reorder buttons. But what I want to achieve is using material-ui's Autocomplete element to handle the entire array where one Autocomplete will represent the whole array and items will be chips in it. So, I used the schema above, and defined this widget:

<Autocomplete
        fullWidth
        multiple
        options={[]}
        freeSolo
        onChange={this.handleChange}
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Chip variant="outlined" label={option} {...getTagProps({ index })} />
          ))
        }
        renderInput={(params) => (
          <MaterialTextField
            {...params}
            variant="outlined"
            error={this.isError()}
            required={this.isRequired()}
            label={this.props.label}
            disabled={this.isDisabled()}/>
        )}
      />

with handleChange method passing array of values like this:

  handleChange = (event, value) => {
    console.log('%c multi text value', 'background: orange; color: black;', value);
    this.props.onChange(value);
  }

Autocomplete works as I expect and saves all entered values into array of strings. But later when this array of values is passed somewhere further I get an error from rjsf:

enter image description here

So, what I think happens is that I specified array items as strings and that's why it fails validation. But is there a way to "cheat" rjsf and achieve what I want? Multiselect in rjsf is also an array of strings, but it works fine as a one component and doesn't render each item on new string...

I tried to play around with ArrayTemplate but it only allows to add a new widget for item with onAddClickProp.

0

There are 0 best solutions below