The use of ReferenceArrayInput

Question

I've an issue with ReferenceArrayInput that I try to use for a group membership representation.

Here the code related to a group editing UI

export const UserGroupEdit = (props) => (
    <Edit title={<UserGroupTitle />} {...props}>
        <SimpleForm>
            <TextInput label="Common Name" source="commonName" />
            <TextInput label="E-mail" source="email" type="email" />
            <TextInput label="Shortname (UNIX purpose)" source="shortname" />
            <ReferenceArrayInput label="Members" source="members" reference="users">
                 <SelectArrayInput optionText="fullName" />
            </ReferenceArrayInput>
            <DisabledInput label="Record UUID" source="id" />
            <DisabledInput label="Record ID" source="numericID" />
        </SimpleForm>
    </Edit>
);

I've two issue.

First, if the related property in the represented object is empty, the UI does not display the input field. It show the title of the field, a whitespace with no input possible and the next one. When I pass the mouse over the whitespace, I get the same icon attached to the mouse as a DisabledInput, the forbidden sign.

Second, if there is already one value, I can add new one, I've the text input available and the autocompletion is working well. However, once I select one value to add, it immediately disappear. It does not stay in memory until the save or cancel action.

And if in the second case, I remove existing values, they get properly removed and once I remove everything I'm back to the first issue.

Is there something I'm doing wrong?

Answer 1

关于您的第一个问题，您可以尝试向allowEmpty添加ReferenceArrayInput道具：

<ReferenceArrayInput label="Members" source="members" reference="users" allowEmpty>

Answer 2

这确实是一个错误。此问题已在master上修复，将很快以版本1.4.0发布。