How can I add a Datagrid reflecting currect state of ReferenceArrayInput to a react-admin edit form?

Viewed 88

I'm writing a user management using react-admin and try to make adding users to groups easier, i.e. by adding groups from a user's edit page using auto-complete. Starting with an example, I've got some success using the following:


   <ReferenceArrayInput
      label="Group"
      source="groups"
      reference="groups"
   >

    <AutocompleteArrayInput
        {...props}
        resettable={true}
        allowEmpty={true}
        optionText="name"
        fullWidth
    />

   </ReferenceArrayInput>

However, this method uses Chip component to display selected items inline. I would like to use a Datagrid instead. I know from the source code that I cannot override the display part of an auto-complete (yet?), so I thought I could resort to hiding Chips via CSS, but I would still need a way to display a Datagrid with current selection. So I tried this (it's wrapped in FormWithRedirect, hence formProps):

    <ReferenceArrayField
        {...formProps}
        label="Group"
        source="groups"
        reference="groups"
    >
        <Datagrid>
            <TextField source="name" />
        </Datagrid>
    </ReferenceArrayField>
    <ReferenceArrayInput
        {...formProps}
        label="Group"
        source="groups"
        reference="groups"
    >
        <AutocompleteArrayInput
            resettable={true}
            allowEmpty={true}
            optionText="name"
            fullWidth
        />
    </ReferenceArrayInput>

This works almost exactly as I want it, a Datagrid is displayed and it shows the right data for the selection, however, it's not updated when selected items on AutocompleteArrayInput change. How ever I tried (been through probably all the hooks and contexts), I could not make it work.

Is this possible? How can I make Datagrid update when selection changes on AutocompleteArrayInput?

0 Answers
Related