Merge pull request #7707 from marmelab/fix-reference-input

Fix ReferenceInput Stuck On Loading State

Author: fzaninotto

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

@@ -129,6 +129,25 @@ describe('useReferenceInputController', () => {
         });
     });
 
+    it('should not fetch current value using getMany if it is empty', async () => {
+        const children = jest.fn().mockReturnValue(<p>child</p>);
+        render(
+            <CoreAdminContext dataProvider={dataProvider}>
+                <Form defaultValues={{ post_id: '' }}>
+                    <ReferenceInputController {...defaultProps}>
+                        {children}
+                    </ReferenceInputController>
+                </Form>
+            </CoreAdminContext>
+        );
+
+        await waitFor(() => {
+            expect(dataProvider.getList).toBeCalledTimes(1);
+        });
+        await new Promise(resolve => setTimeout(resolve, 100));
+        expect(dataProvider.getMany).not.toHaveBeenCalled();
+    });
+
     it('should pass possibleValues and record to child', async () => {
         const children = jest.fn().mockReturnValue(<p>child</p>);
         render(

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

@@ -111,6 +111,9 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
     } = useReference<RecordType>({
         id: currentValue,
         reference,
+        options: {
+            enabled: currentValue != null && currentValue !== '',
+        },
     });
     // add current value to possible sources
     let finalData: RecordType[], finalTotal: number;

packages/ra-core/src/controller/useReference.ts

@@ -1,9 +1,11 @@
 import { RaRecord, Identifier } from '../types';
 import { UseGetManyHookValue, useGetManyAggregate } from '../dataProvider';
+import { UseQueryOptions } from 'react-query';
 
-interface UseReferenceProps {
+interface UseReferenceProps<RecordType extends RaRecord = any> {
     id: Identifier;
     reference: string;
+    options?: UseQueryOptions<RecordType[], Error>;
 }
 
 export interface UseReferenceResult<RecordType extends RaRecord = any> {
@@ -44,10 +46,11 @@ export interface UseReferenceResult<RecordType extends RaRecord = any> {
 export const useReference = <RecordType extends RaRecord = any>({
     reference,
     id,
-}: UseReferenceProps): UseReferenceResult<RecordType> => {
+    options,
+}: UseReferenceProps<RecordType>): UseReferenceResult<RecordType> => {
     const { data, error, isLoading, isFetching, refetch } = useGetManyAggregate<
         RecordType
-    >(reference, { ids: [id] });
+    >(reference, { ids: [id] }, options);
     return {
         referenceRecord: error ? undefined : data ? data[0] : undefined,
         refetch,