How to draw array items as chips in one element instead of drawing each array item on a separate raw with its own widget? - react-jsonschema-forms

Question

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:
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.