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>
Related
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
I have simple react-admin edit form with ReferenceInput. The problem is that ReferenceInput never show progress bar, so it might be confusing for users to see no options while it's loading.
I manually set delay 2 seconds on API calls but ReferenceInput never show loading state.
import React from 'react';
import { ReferenceInput, ReferenceArrayInput, required, SelectArrayInput, SelectInput, SimpleForm, TextInput } from 'react-admin';
const ModelForm = props => (
<SimpleForm {...props}>
<TextInput source="name" validate={[required()]} />
<ReferenceInput reference="goods_types" source="goodsType" validate={[required()]}>
<SelectInput optionText="name" />
</ReferenceInput>
<ReferenceInput reference="manufacturers" source="manufacturer" validate={[required()]}>
<SelectInput optionText="name" />
</ReferenceInput>
<ReferenceArrayInput reference="manufacturers" source="manufacturer" format={v => [v]} validate={[required()]}>
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
</SimpleForm>
);
export default ModelForm;
Just for test I added ReferenceArrayInput component and it does show loading progress bar.
Is it bug in react-admin? Or am I missing something?
React-admin: 3.11.1
React Admin introduced a timeout with default value of 1000. The loading component only appear after this time. You can override this value by passing a prop to the component.
ref: https://github.com/marmelab/react-admin/blob/ea1f85c73f5be8f12544a0fccf32e4f6bd7452be/packages/ra-ui-materialui/src/layout/LinearProgress.tsx
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'}}/>
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>