onChange not working if trying to add JsonForms as a table cell for multiple row

General
1

I have like multiple rows and for one of the columns of the row I am using the JsonForms to create an object with multi-select dropdown JsonForm. Im unable to use onChange event inside a table cell

filterUISchema = {
      "type" : "VerticalLayout",
      "elements" : [
        {
          "type": "Control",
          "scope": "#/properties/language",
          "ui:widget": "select",
          "options": {
            "multi": true
          }
        },
        {
          "type": "Control",
          "scope": "#/properties/region",
          "options": {
            "multi": true
          }
        },          
    ] 
  }

filterFormSchema = {
      "type": "object",
      "properties": {
        "language": {
          "items" : {
            "type": "string",
            "enum": ["english", "spanish","roman"]
          },
          "type": "array",
          "uniqueItems": true,
          "minItems": 1
        },
        "region": {
          "items": {
            "type": "string",
            "enum": ["australia","england","US"],
          },
          "type": "array",
          "uniqueItems": true,
          "minItems": 1,        
        }
      },
    }

using a custom render to select multiple values.

 const renders = [
    ...materialRenderers,
    {tester:materialMultiSelectTester, renderer:materialMultiSelect},
    {tester:materialSelectAutofillTester, renderer:materialSelectAutofill},
  ];

 const handleDefaultsAjv = createAjv({useDefaults: false});

I want to able to set the value of filters in each of the table cells and add logic based on the value selected by the user.

          <TableCell>
            <div>
            <JsonForms
              safeRenderCompletion={true}
              schema={filterFormSchema}
              uischema={filterUISchema} 
              data={filterList}
              cells={materialCells}
              renderers={renders}
              onChange= {({ data, errors }) => {setState({..state, 'data': data, 'errors':errors})}}
              ajv={handleDefaultsAjv}
            />
            </div>
          </TableCell>

Im unable to use onChange event for JSON forms inside a table cell. I’m getting an error with maximum update depth exceeded if I try to set the value in the onChange.
In order to resolve that I started to set the value if there is a change but that still seem to not able to work

if (JSON.stringify(data) !== JSON.stringify(filterLists['data']))

that resolved the error but I am still unable to set the value for any of the field. Also on Change seems to trigger like a lot of times (>50 times) even when the table is loaded for the first time.
Further how do you reference each of the json forms individually in each of the Table cell? I tried to name them based on the index, but is there a better way than creating multiple ui and form Schema for each row?

if (index == 0 ) 
  {
  vendingFilterUISchema = {
      "type" : "VerticalLayout",
      "elements" : [
        {
          "type": "Control",
          "scope": "#/properties/language0",
          "ui:widget": "select",
          "options": {
            "multi": true
          }
        },
        {
          "type": "Control",
          "scope": "#/properties/region0",
          "options": {
            "multi": true
          }
        },          
    ]
2

Hi @jonathan,

I don’t think the problem has anything to do with JSON Forms being rendered within a TableCell. Just out of curiosity, how many JSON Forms instances are you rendering at the same time?

Which version of JSON Forms are you using? There were quite some number of improvements for 3.0, so I would definitely recommend using the latest prerelease in case you’re still using 2.5.2.

In any case JSON Forms will always emit an onChange when the incoming props are changing (to tell you the validation results), including the initial rendering. So on first rendering, so you should get at least as many events as there are JSON Forms instances.

Afterwards you need to be careful with your rerenderings. JSON Forms is an expensive component (validation + rendering engine). We memoize all incoming props, so you should really only change the instance of your props when they actually changed.

I can’t see enough of your code to determine where the problem here lies. However I would expect that the outgoing onChange has a cascading effect in your code which leads to some incoming props being changed, triggering another change event etc. etc.