react-admin: ReferenceInput doesn't work correctly

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>.

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.

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?

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…)

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.

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>;

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

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}
    />;
}

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

@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.

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.