Fix <ReferenceInput> don't return currently selected choice when enableGetChoices returns false

Author: djhi

packages/ra-core/src/controller/input/useReferenceInputController.spec.tsx

@@ -316,6 +316,7 @@ describe('useReferenceInputController', () => {
 
         it('should fetch current value using getMany even if enableGetChoices is returning false', async () => {
             const children = jest.fn().mockReturnValue(<p>child</p>);
+
             render(
                 <CoreAdminContext dataProvider={dataProvider}>
                     <Form defaultValues={{ post_id: 1 }}>
@@ -333,6 +334,19 @@ describe('useReferenceInputController', () => {
                 expect(dataProvider.getList).toBeCalledTimes(0);
                 expect(dataProvider.getMany).toBeCalledTimes(1);
             });
+            await waitFor(() => {
+                expect(children).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        sort: { field: 'id', order: 'ASC' },
+                        allChoices: [{ id: 1, title: 'foo' }],
+                        availableChoices: [],
+                        selectedChoices: [{ id: 1, title: 'foo' }],
+                        isPending: true,
+                        total: 1,
+                        isFromReference: true,
+                    })
+                );
+            });
         });
     });
 });

packages/ra-core/src/controller/input/useReferenceInputController.ts

@@ -154,22 +154,31 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
 
     // add current value to possible sources
     const { finalData, finalTotal } = useMemo(() => {
-        if (isPaused && possibleValuesData == null) {
+        if (isPaused && possibleValuesData == null && referenceRecord == null) {
             return {
                 finalData: null,
                 finalTotal: null,
             };
         }
         if (
-            !referenceRecord ||
+            referenceRecord == null ||
             possibleValuesData == null ||
             (possibleValuesData ?? []).find(
                 record => record.id === referenceRecord.id
             )
         ) {
+            // Here we might have the referenceRecord but no data (because of enableGetChoices for instance)
+            const finalData = possibleValuesData ?? [];
+            if (
+                referenceRecord &&
+                finalData.find(r => r.id === referenceRecord.id) == null
+            ) {
+                finalData.push(referenceRecord);
+            }
+
             return {
-                finalData: possibleValuesData,
-                finalTotal: total,
+                finalData,
+                finalTotal: total ?? finalData.length,
             };
         } else {
             return {

packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx

@@ -846,6 +846,38 @@ export const InsideReferenceInput = () => (
     </TestMemoryRouter>
 );
 
+const enableGetChoices = filters => filters?.q?.length > 3;
+export const InsideReferenceInputWithDisableChoice = () => (
+    <TestMemoryRouter initialEntries={['/books/1']}>
+        <Admin dataProvider={dataProviderWithAuthors}>
+            <Resource name="authors" />
+            <Resource
+                name="books"
+                edit={() => (
+                    <Edit
+                        mutationMode="pessimistic"
+                        mutationOptions={{
+                            onSuccess: data => {
+                                console.log(data);
+                            },
+                        }}
+                    >
+                        <SimpleForm>
+                            <ReferenceInput
+                                reference="authors"
+                                source="author"
+                                enableGetChoices={enableGetChoices}
+                            >
+                                <AutocompleteInput optionText="name" />
+                            </ReferenceInput>
+                        </SimpleForm>
+                    </Edit>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);
+
 const LanguageChangingAuthorInput = ({ onChange }) => {
     const { setValue } = useFormContext();
     const handleChange = (value, record) => {