For some reason, the ReferenceInput works fine on my Edit form; but on Create form, it shows as disabled and empty (I use the same code for both form). It also doesn't show any error in chrome dev tools. Do I have to do any additional stuff for the Create form to work? Thanks
This works for me. Note "allowEmpty" in ReferenceInput
<Create title="My title" {...props}>
<SimpleForm>
<TextInput label= "field 1" source="f1" validate={[ required, minLength(3), maxLength(20) ]} />
<ReferenceInput label="field 2" source="f2" validate={[ required ]} reference="reference1" allowEmpty>
<AutocompleteInput optionText="f3" />
</ReferenceInput>
</SimpleForm>
</Create>
Related
In React Admin, How to disable the selection of a reference input?
<ReferenceInput label="Post" source="post_id" reference="posts">
<SelectInput optionText="id" />
</ReferenceInput>
Per the docs, you can use the disabled property on React-Admin input components, including ReferenceInput:
<ReferenceInput label="Post" source="post_id" reference="posts">
<SelectInput optionText="id" disabled />
</ReferenceInput>
You could alternatively set it to a boolean:
… disabled=true />
Or you could set it to a function that returns a boolean. This is often useful as you could set it to disable the field based on some logic:
… disabled={someFunction} />
We can do it as below:
<ReferenceInput label="Post" source="post_id" reference="posts">
<SelectInput optionText="id" disabled />
</ReferenceInput>
In react-admin we have ReferenceManyField. It would be fantastic to have also a component called ReferenceManyInput, with a functionallity very similar to the ArrayInput component (add, remove buttons) but with reference to a resource.
¿Does any one know if they have intention to include it or is there any workaround to achieve this?
The use case is:
I have a form for creating/editing an entity where one of its properties is an array of other related entities. I would like to add and/or remove new elements to that array and when submitting the main entity, it creates/updates/remove the related entity and the main entity.
Maybe I am asking for too much...
Thanks in advance
You're in luck: <ReferenceManyInput> was just published as part of React-admin Enterprise Edition. It works just like ReferenceManyField:
import {
Edit,
SimpleForm,
TextInput,
NumberInput,
ReferenceInput,
SelectInput,
} from 'react-admin';
import { ReferenceManyInput } from '#react-admin/ra-relationships';
const ProductEdit = () => (
<Edit mutationMode="optimistic">
<SimpleForm>
<TextInput source="name" />
<NumberInput source="price" />
<ReferenceInput source="category_id" reference="categories" />
<ReferenceManyInput reference="variants" target="product_id">
<SimpleFormIterator inline>
<TextInput source="sku" />
<SelectInput source="size" choices={sizes} />
<SelectInput source="color" choices={colors} />
<NumberInput source="stock" defaultValue={0} />
</SimpleFormIterator>
</ReferenceManyInput>
</SimpleForm>
</Edit>
);
The result looks like:
Check https://marmelab.com/ra-enterprise/modules/ra-relationships#referencemanyinput for details.
In React-admin i am trying to implement a referenceinput. I see that the list api call is made and response is availble. however the selectinput component remains empty.
I would appreciate any help.
Table source column is notes. and reference resource is notes:
<Create actions={<CoaActions />} title="New Coa" {...props}>
<SimpleForm variant="standard">
<TextInput source="code" />
<TextInput multiline source="title" />
<TextInput source="iscashbook" />
<TextInput source="isbankbook" />
<ReferenceInput label="Notes" source="notes" resource="notes" reference="notes/list">
<SelectInput optionText="name" />
</ReferenceInput>
<TextInput source="obal" />
<BooleanInput source="active" />
</SimpleForm>
</Create>
Remove the resource prop from the referenceinput
In general question: How to add custom autocomplete value to the AutocompleteInput ?
Problem started when you will try to add options to the AutocompleteInput:
<ReferenceInput source="company_id" reference="companies" validate={required()}>
<AutocompleteInput optionValue="id" optionText="name" options={{autoComplete: 'blabla'}}/>
</ReferenceInput>
Everything works good with (for example):
<LongTextInput options={{autoComplete: 'blabla'}}/>
I have a react-admin based site working nicely.
Though i have an issue with the sidebar menu. If i click one of the items twice it clears all the form inputs. This is a link to an edit form of the resource item (in this case the current user profile):
<MenuItemLink to={"/users/" + user.id} primaryText="Profile" leftIcon={createElement(UserIcon)} onClick={onMenuTap}/>
with resource that looks like:
<Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} icon={UserIcon} />
where UserEdit is
export const UserEdit = (props) => {
<Edit title={<UserEmail />} actions={<UserEditActions />} {...props}>
<SimpleForm validate={validateUserSave}>
<DisabledInput source="email"/>
<TextInput label="First Name" source="firstName" />
<TextInput label="Last Name" source="lastName" />
...
on first click all the inputs are populated from my REST api, but on 2nd tap (menu item selected) - all the form values are cleared...
Any ideas?
It is indeed a bug, I opened an issue on React Admin:
[#2291] Double-click on a Icon from the Menu reset the edition form
[#2322] Fix resetform when navigating to same page
A fix will be published with react-admin#2.3.2!
Thanks for reporting the issue.