Strange behavior with multi-object (array) forms and checkboxes.

[art-solopov]

I'm trying to make a React form that would process multiple objects at once (in a table of objects). My schema is:

const _permissionsSubSchema = AvailablePermissions.reduce( (s, p) => {
    s[p] = yup.boolean();
    return s;
}, {});

const modelSchema = yup.object({
    roles: yup.array().of(
    yup.object({
        name: yup.string().required(),
        superuser: yup.boolean(),
        permissions: yup.object(_permissionsSubSchema)
    })
    )
});

AvailablePermissions is (currently) [ "can_see_all_issues", "can_create_issues", "can_edit_all_issues", "can_edit_statuses" ], so the scheme is basically equivalent to

yup.object({
    roles: yup.array().of(
    yup.object({
        name: yup.string().required(),
        superuser: yup.boolean(),
        permissions: yup.object({
                can_see_all_issues: yup.boolean(),
                can_create_issues: yup.boolean(),
                can_edit_all_issues: yup.boolean(),
                can_edit_statuses: yup.boolean(),
            })
    })
    )
});

The form itself can be seen in this gist (or in the repo). Basically, it renders the form as a table:

The top row is the one not being edited, the bottom one is the new role.

My problem is, when I try to toggle a permission checkbox, it doesn't save, even though the data seems to be transferred correctly.

Moreover, if I try to toggle any permission checkbox, it starts to send weird data.

Where did this "0" came from? O_o

Am I doing anything wrong?

Thank you very much.

[jquense]

I'm not quick sure what might be wrong, but judging from the '0' it looks like there is an array somewhere you don't expect and the index is getting set. I'd make sure all the names of fields map correctly to the object structure and that the value return ed from on change is correct before you do any more translation on it. overall tho your use case is supported just fine and I can't think of any bugs or limitations that might the problem here

[art-solopov]

Okay, I did find an error in my serializer. Sorry. My dumb.

[lvdang]

@art-solopov Do you have code sample with your Yup schemas and Form.Field declaration for 'checkbox'. I am trying to implement similar.