React-admin: ReferenceInput doesn't work correctly

[saf-1]

SelectInput component doesn't display choices (SelectInput always disabled):

<ReferenceInput source="productId" reference="products">
    <SelectInput optionText="name" />
</ReferenceInput>
````

![image](https://cloud.githubusercontent.com/assets/22914199/24031956/6d7477d0-0af6-11e7-8413-5b80a22f0eb9.png)


When adding attributes "allowEmpty" and "validation={{ required: true }}" component renders fine:

```js
<ReferenceInput source="productId" reference="products" allowEmpty validation={{ required: true }}>
    <SelectInput optionText="name" />
</ReferenceInput>

version 0.9.1

[fzaninotto]

Are you in a <Create> view? If so, it's expected, as explained in the doc:

Tip: The <Edit> and the <Create> components use the same <ReferenceInput> configuration, except for the allowEmpty attribute, which is required in <Create>.

[saf-1]

I am in edit view

export const TariffEdit = (props) => (
    <Edit title="resources.tariffs.title.edit" actions={<TariffEditActions />} {...props}>
        <SimpleForm>
            <ReferenceInput source="productId" reference="products">
                <SelectInput optionText="name" />
            </ReferenceInput>
            <TextInput source="title" validation={{ required: true }}/>
            <TextInput source="tariffValString" />
            <NumberInput source="sortOrder" step={1}/>
        </SimpleForm>
    </Edit>
);

[saf-1]

Also TextField looks like "loading" in datagrid for rows with empty productId in my case:

export const TariffList = (props) => (
    <List title="resources.tariffs.title.list" {...props}>
        <Datagrid>
            <TextField source="title"/>
            <ReferenceField label="resources.products.name" source="productId" reference="products">
                <TextField source="name" />
            </ReferenceField>
            <EditButton basePath="/tariffs"/>
        </Datagrid>
    </List>
);

[fzaninotto]

I can't reproduce it in the demo. I believe both bugs come from the fact that aor doesn't manage to load the related items.

Did you create a products resource?

[kix]

I can confirm the issue reported by @saf-1 on 0.9.1. The SelectInputs are disabled unless allowEmpty prop is added.

[fzaninotto]

I really can't reproduce it - the SelectInput displays related values fine in my projects, without needing allowEmpty.

Can you share some code?

[leesei]

If you have empty productId:

• <SelectInput> in <Edit> will be disabled because of the empty initial value
  which is why we have to add allowEmpty in <Create>
• <ReferenceField> will try to get /products/undefined which causes a 404, and shows the loading bar because the reference record cannot be not loaded

[stefsava]

@AIUI I understand that in the most common cases you need to add the allowEmpty property both in Create and Edit.

Otherwise, if you edit a record with the field managed by ReferenceField in case the current value is null, the SelectInput is not shown.

It's probably a bug, though. If I do not add allowEmpty I declare that it is necessary to indicate a value and I expect to be allowed to do so.

The fact that the record before it is edited does not contain the value should not be conditioned.

TLDR

The list must always be provided, the allowEmpty property simply adds the empty selection to the list.

[wesley6j]

What allowEmpty does currently is confusing. We are forced to set it to true, but in fact we don't want an empty option in its child SelectInput. What about removing these lines :

if (!referenceRecord && !allowEmpty) {
    return <Labeled
        label={typeof label === 'undefined' ? `resources.${resource}.fields.${source}` : label}
        source={source}
        resource={resource}
    />;
}

[iamsimakov]

Hello, I also find this problem. In edit view with null initial state ReferenceInput is disabled and adding allowEmpty helped me.

[clwilliams]

I'm new to this tool and have been working with it for a couple of weeks now. Even though I read the documentation this tripped me up for hours until I came across this issue; on the create form for a ReferenceArrayInput, I didn't add omitEmpty as I wish it to be a required attribute - can the documentation be clearer that it's different to validation / a required value and only specific to allowing the initial loading value of the field to be empty?

[petitchevalroux]

I think allowEmpty is confusing because we must use it for being able to create a resource linked to another one. But, what it does is adding and empty value in linkable resources.

In todolist app context :
If I create a todo item. I am expecting this item belonging to a todo list. So, when creating the item, I must choose a list.

Currently if I do not add allowEmpty the ReferenceInput is disabled in Create mode. If I add allowEmpty, users can create an item without a linked list because it add an empty value.

What I am expecting is the generated SelectedInput being populated with linkable resources without the empty value.

Imho allowEmpty works as expected but we may need another option for this particular use case.

[KimSpecht]

I agree it's broken, it gets disabled when it shouldn't.
<Filter {...props}> <ReferenceInput source="status" reference="statuses"> <SelectInput optionText="name"/> </ReferenceInput> </Filter>
The above will work, showing my records but adds an empty select option, which I do not want, changing to allowEmpty false, the input is completely disabled.
<Filter {...props}> <ReferenceInput source="status" reference="statuses" allowEmpty={false}> <SelectInput optionText="name"/> </ReferenceInput> </Filter>

Another example, use the demo project:
https://github.com/marmelab/admin-on-rest-demo/blob/master/src/products/index.js#L65

Add "allowEmpty={false}", now it's disabled and create will fail had the field been required.

[petitchevalroux]

Ok, by digging more I think my problem is that isRequired != Empty

I just created a component working as I expect in create mode :
https://gist.github.com/petitchevalroux/e39bb59d8e8416037f3b96e35a144b22

It allows to choose an item in SelectInput but didn't allow the form to be submitted with the empty item.

[edouardmenayde]

Where are we on this ? The solution by @petitchevalroux works but is not ideal from a UX standpoint (telling a user a choice we gave them is wrong, is clearly not good...)

[kopax]

I'm hitting the same issue. Is there a fix scheduled?

[danyalaytekin]

It would be great to get this fixed. For now, here's yet another workaround. The workarounds above, which tried to fix the problem by only modifying the ReferenceInput, haven't worked for me.

const validateForm = values => values.personId ? {} : { personId: 'Person is required' };

export const CreateSomething = props => <Create {...props}>
    <SimpleForm validate={ validateForm }>
        <ReferenceInput source="personId" label="Person" reference="persons" allowEmpty>
            <SelectInput optionText="name" />
        </ReferenceInput>
    </SimpleForm>
</Create>;

[mxmzb]

I also have a similar issue. I can select some reference but it will not actually apply on the form (the input stays empty). I also have the allowEmpty flag in there cause otherwise it wouldn't even show up (it's in the create action). Someone expecting something similar?

[mxmzb]

@vascofg I was, but I can't remember any more what I did exactly. In general, you might want to downgrade to React.js v15 and properly (it's easy to misread things or not to see your own typos!) follow plugin documentation and workarounds from this thread, then it should work just fine.

[djhi]

I can't reproduce this on the example app with version 1.3.4. Feel free to reopen if you can show the issue on a codesandbox (https://codesandbox.io/s/5xwv91v4n4).