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'}}/>
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>
I have a list of agents and I am displaying them in a datagrid. After adding the search with filter option, any search does not update the items in datagrid as shown at example. I have a DRF based backend and using 'ra-data-drf' as dataprovider for the react-admin app.
Below is my code for the search component.
const AgentFilter = (props) => (
<Filter {...props}>
<TextInput label="Search" source="name" alwaysOn />
<ReferenceInput label="Agent" source="id" reference="agents" allowEmpty>
<SelectInput optionText="name" />
</ReferenceInput>
</Filter>
)
Does the search function depend on the filtering capabilities of the backend? What am I missing? Attached is a screenshot where the search does not update the datagrid below.
As the 'filtering' section of the docs say "is intended to work with django-filter's DjangoFilterBackend ". On enabling filtering on the viewset, react-admin started to filter the fields as expected.
AutocompleteInput is pretty good to use in react admin. However, is there a way to make it resettable? Thanks!
<ReferenceInput
label={translate('resources.cards.fields.search_name')}
source="id"
reference="cards"
alwaysOn
resettable
>
<AutocompleteInput optionText="name" inputValueMatcher={() => null} resettable />
</ReferenceInput>
I put resettable for both ReferenceInput and also AutocompleteInput but the reset button just doesn't show up. Thanks!
Unfortunately, no, it looks like it is not possible at this moment:
https://github.com/marmelab/react-admin/issues/2564
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>
Here is the ref : Admin-on-Rest
in app.js :
<Resource name="customers" list={CustomerList} icon={UserIcon} edit={CustomerEdit} create={CustomerCreate}/>
in customer.js :
<TextInput source="firstname" />
<ReferenceInput label="Partner" source="id" reference="partners" >
<AutocompleteInput optionText="name" />
</ReferenceInput>
<TextInput source="email" />
The problem is autocomplete not shown, but I check in log data retrieved from API end point /partners
And if I change reference to reference="customers", data and autocomplete shown.
Help please ??
You need another <Resource> for the relationship, even empty:
<Resource name="customers" list={CustomerList} icon={UserIcon} edit={CustomerEdit} create={CustomerCreate}/>
<Resource name="partners" />
It is well documented for <ReferenceField> (see the note), perhaps it needs the same note for <ReferenceInput>.
You <ReferenceInput reference="..."> needs to match the <Resource name="..."> for this to work. So this is the reason why reference="customers" worked for you.
If you want to get data from customers endpoints, but you want the label to be Partner you can specify it as label attribute on your ReferenceInput component, e.g. <ReferenceInput label="Partner" ...>.
The problem is probably the way you're importing your 'ReferenceInput' object. I had the same issue while creating my app and had no idea what is the problem.
Check your import line and if it looks like this:
import {ReferenceInput} from "../../src/mui/input/ReferenceInput";
then change it to look this way:
import ReferenceInput from '../../src/mui/input/ReferenceInput';
Hope that helps you!