How do we handle onChange event for subfields?

Technical Questions
, , , ,
1

For my custom component, I have a field of type list.
For this first level field, onChange function works perfectly.

I also have a subfield of type list under it, for which I wish to add onChange function.
This throws data clone error as mentioned in this forum onChange and showIf for List's subFields - DataCloneError - #2 by TimG

The above forum mentions to add the functionality in the onChange function of the parent element but I’m not able to access the exact sublist which is getting changed since it gives the entire data of lists and sublists.

Could you please help me with this on how I can achieve this?

2

Hey @olivela yes of course! I Am happy to take a look

Could you share the code of the customComponent you are working on, and what the exact behavior you are trying to achieve is? What function are you trying to call when changing the input of your sublist? Any further context would be helpful!

Feel free to post any code or links here, or DM me within this forum

3

Hi, I have a similar issue, basically onChange doesn’t work on any subfield. Also receiving the DataCloneError.

My project is in Next.js + TS, and this is a simplified version of my custom input object:

LinkComponent = {
  name: 'LinkComponent',
  inputs: [
    {
      name: 'Items',
      type: 'list',
      subFields: [
        {
          name: 'linkDescription',
          friendlyName: 'Description',
          type: 'richText',
        },
        {
          name: 'isLinkedGroup',
          friendlyName: 'Pop-up',
          type: 'boolean',
          default: false,
        },
        {
          name: 'link',
          type: 'object',
          subFields: [
            {
              name: 'url',
              type: 'url',
              showIf: `!options.get('isLinkedGroup')`,
              regex: { ...linkRegexConfig },
            },
            {
              name: 'events',
              type: 'list',
              onChange: (options) => {
                console.log('I never fire');
              },
              subFields: [
                {
                  name: 'dataAttributes',
                  type: 'list',
                  subFields: [
                    {
                      name: 'name',
                      type: 'text',
                    },
                    {
                      name: 'value',
                      type: 'text',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ],
};

What I need is: If the ‘events’ list has at least an object, ‘url’ has to be required; within the ‘link’ object. But if onChange is in a subFields list -no matter the input- is not going to trigger. showIf and regex are working, and onChange works on first level inputs.