CheckboxGroupInput inside a ReferenceArrayInput

[RWOverdijk]

My code:

import * as React from 'react';
import {
  CheckboxGroupInput,
  Edit,
  ReferenceArrayInput,
  SimpleForm,
  TextInput,
} from 'react-admin';

const resourceSort = { field: 'resource', direction: 'asc' };

export function RoleEdit(props: any) {
  return (
    <Edit {...props}>
      <SimpleForm>
        <TextInput source="name" />
        <ReferenceArrayInput source="permissionIds" reference="permissions" sort={resourceSort} perPage={100}>
          <CheckboxGroupInput optionText="description" />
        </ReferenceArrayInput>
      </SimpleForm>
    </Edit>
  );
}

I get:

If you're not wrapping the CheckboxGroupInput inside a ReferenceArrayInput, you must provide the source prop

I'm not expecting this to work since it's not documented. This is more of a curtocy report (which is why I am not following the template).

So this report is twofold:

1. I think the message is wrong. Maybe it was supposed to also look at isLoading? Maybe it's not supposed to even try and fetch the options? In any case, it is wrapped so the message is wrong. https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx#L125,L133
2. It only works partially (which is more than I expected). The data is fetched and displayed just fine (testing on an edit form) but when calling save it calls the dataprovider with a path and not an action (action: "roles/d45ccd25-4118-4fe3-adc4-67cf1fd32a2f").

Context

This context just explains why I was even looking into using CheckboxGroupInput in ReferenceArrayInput.

The use case is me struggling to create a custom input where I want to group together checkboxes. It's for permission inputs. I need accordions for resources and checkboxes for actions. For those more visual, here's a screenshot (sorry it's in Dutch):

I got it working. Reading works fine. Writing works fine. it's toggling values that is troublesome. I keep getting this warning:

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

So the reason I was looking into is because I was hoping I could find the answer to my issue by looking at the code for it.

Update

Are there any instructions available on how I can use react-admin from source instead of the transpiled version? That would make it a lot easier for me to find, implement and PR a fix for the issues I keep reporting.

[slax57]

Hi @RWOverdijk ,

Indeed the warning you get makes me think this usage was considered at some point, even though it is currently not officially supported. It might be doable with maybe a few adaptations in the code, and I agree it would be nice to have 🙂 .
If you agree I'll label this as a feature request.

Regarding your last question, when we test features during development, we use the examples projects (simple, demo, crm...) which allows us to see the changes instantly.
Maybe you can have a look at our ViteJS config in the simple example to see how you could link your project with our sources locally.
But I admit I'm inexperienced with such config. Maybe @djhi knows a better way to do this?

[RWOverdijk]

@slax57 Fair, I'll give that a go. I tried linking so I can test in my own app but I got a lot of issues.

Labeling it an enhancement is fair.

[RWOverdijk]

Update for future readers: The issue about controlled/uncontrolled was a pebkac (checkbox controlled uses the checked prop, not the value prop). The rest is still relevant.

[antoinefricker]

I managed to use both components together on a (very very) simpler use case (btw you made a pretty cool UX) - See the sandbox here in Posts / Edit / Summary

The PR below corrects the error whom you perfectly spotted the cause.

I'll close the issue, please comment below if I missed something.