marmelab / marmelab/react-admin
ReferenceInput does not fetch current value
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 26.9k
- Forks
- 5.5k
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 19
Description
I am writing a AutoComplete input that stores values from `users` table `login` field. The code is as follows. Everything works just fine if `perPage` is large enough to include all records from users table. However, if `perPage` is small, then I am missing the current value in the drop-down box, and value appears to be empty
```tsx
```
**Root-cause:**
Reference input performs 2 queries from `useReferenceInputController`
- `useGetList` to fetch possible values
- `useReference` to fetch current values
The issue with `useReference` query is that it expects value to include `id`. In my example above, I am using `users.login` attribute instead of `users.id` as optionValue; as the result, the only records that are received are the records returned by `useGetList` and, due to pagination settings, the current value may be missing from available choices and will not be displayed.
**Proposed fix**
- Add `optionValue` attribute to `ReferenceInput` which defaults to `id`
- If `optionValue === 'id'`, continue using `useReference` as displayed below
- If `optionValue !== 'id'`, fetch current selection using `useGetList` with `filter: { [optionValue]: currentValue }`
```tsx
// fetch current value
const {
referenceRecord: currentReferenceRecord,
refetch: refetchReference,
error: errorReference,
isLoading: isLoadingReference,
isFetching: isFetchingReference,
isPending: isPendingReference,
} = useReference({
id: currentValue,
reference,
// @ts-ignore the types of the queryOptions for the getMAny and getList are not compatible
options: {
enabled: currentValue != null && currentValue !== '',
meta,
...otherQueryOptions,
},
});
```
Another issue is that sometimes values stored in current table's `owner` attribute are not found in `users.login` table (due to data retention issues). When that happens, the drop-down box will be empty.
If a referenced value is still missing from `allChoices` and `availableChoices`, can we add `{ [optionValue]: currentValue }` to these variables, so we can display invalid values as selected?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing ReferenceInput and useReferenceInputController, especially the useGetList and useReference queries described in the issue. Reproduce the case with a non-id optionValue and a small perPage, then verify that current selections—including missing referenced values—remain represented and displayed in the choices.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100