Customizing ArrayFieldTemplate in order to use Material-ui Autocomplete to handle entire array with items

Prerequisites

• I have read the documentation;

Description

Hello guys.

Seeking for advice - maybe it is simply unachievable and I should stick to the default solution.

By default rjsf renders ‘array of strings’ field as a set of separate widgets - each per item in the array. There are Add/Remove/Order buttons to manage items within array.

I would like to use Material-UI Autocomplete component (official doc) in order to handle the entire array. I want to make it look like this:

I thought that ArrayFieldTemplate was the way to go, but I faced the following issues:

1. I serialize schemes in a database as jsons. Setting ArrayFieldTemplate per field doesn’t work for me - obviously that it can’t serialize MyArrayFieldTemplate component and I don’t see how to register it like a widget. "ui:ArrayFieldTemplate": MyArrayFieldTemplate

2. After playing around with ArrayFieldTemplate it seems that it only allows to change how will be rendered already added items. It also allows to add a widget for a new item with onAddClick prop. But this method will not let me set the value - it only adds another item in items prop. Methods like onAddIndexClick seem to just add/remove items as widgets at certain indexes, but they don’t allow to manipulate items values at these indexes.

Is it a dead idea to use Autocomplete in order to manage the entire array, and I should abandon it?

My ArrayFieldTemplate looks like this (I had to set it at form level to make it working):

import React from 'react';
import { Chip, TextField as MaterialTextField } from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';

export default function MyArrayTemplate(props) {

  function handleChange(event, value: string[]) {
    // how to pass value (strings array) from Autocomplete to formData as an array value?
    // props.formData = {...props.formData, [props.title]: value }; // formData is readOnly - doesn't work

    props.onAddClick(event); //adds new item to the array, but without value.
    // if I try to call props.items[someIndex].onAddIndexClick(value) it doesn't work either
  }

  function renderTags(value: string[], getTagProps) {
    return value.map((option: string, index: number) => (
      <Chip variant="outlined" label={option} {...getTagProps({ index })} />
    ))
  }

  function renderInput(params) {
    return (
      <MaterialTextField
        {...params}
        variant="outlined"
        error={false}
        required={false}
        label={'label'}
        disabled={false}/>)
  }

  return (
    <div>
      <Autocomplete
        fullWidth
        multiple
        options={[]}
        freeSolo
        onChange={handleChange}
        renderTags={renderTags}
        renderInput={renderInput}
      />
    </div>
  );
}

[skd09021991]

HI

I am also using Autocomplete of material-ui with react json schema-form , could not find any hackery to set the array values to the formData . can anyone please help me in this to set the values in the formData …Thanks in advance

[rajesh0519]

Can u plz help me with onDropIndexClick , i think it is used to remove an element from array , but it is not working for me…!