Add support for offline in Reference inputs

djhi · djhi · commit 32af6175b887 · 2025-05-15T14:55:07.000+02:00
diff --git a/packages/ra-core/src/controller/input/ReferenceInputBase.tsx b/packages/ra-core/src/controller/input/ReferenceInputBase.tsx
@@ -70,6 +70,7 @@ export const ReferenceInputBase = (props: ReferenceInputBaseProps) => {
         reference,
         sort = { field: 'id', order: 'DESC' },
         filter = {},
+        offline = null,
     } = props;
 
     const controllerProps = useReferenceInputController({
@@ -78,7 +79,9 @@ export const ReferenceInputBase = (props: ReferenceInputBaseProps) => {
         filter,
     });
 
-    return (
+    return controllerProps.isPaused ? (
+        offline
+    ) : (
         <ResourceContextProvider value={reference}>
             <ChoicesContextProvider value={controllerProps}>
                 {children}
@@ -91,4 +94,5 @@ export interface ReferenceInputBaseProps
     extends InputProps,
         UseReferenceInputControllerParams {
     children?: ReactNode;
+    offline?: ReactNode;
 }
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -61,6 +61,7 @@ export const useReferenceArrayInputController = <
         error: errorGetMany,
         isLoading: isLoadingGetMany,
         isFetching: isFetchingGetMany,
+        isPaused: isPausedGetMany,
         isPending: isPendingGetMany,
         refetch: refetchGetMany,
     } = useGetManyAggregate<RecordType>(
@@ -99,6 +100,7 @@ export const useReferenceArrayInputController = <
         error: errorGetList,
         isLoading: isLoadingGetList,
         isFetching: isFetchingGetList,
+        isPaused: isPausedGetList,
         isPending: isPendingGetList,
         refetch: refetchGetMatching,
     } = useGetList<RecordType>(
@@ -153,6 +155,7 @@ export const useReferenceArrayInputController = <
         hideFilter: paramsModifiers.hideFilter,
         isFetching: isFetchingGetMany || isFetchingGetList,
         isLoading: isLoadingGetMany || isLoadingGetList,
+        isPaused: isPausedGetMany || isPausedGetList,
         isPending: isPendingGetMany || isPendingGetList,
         page: params.page,
         perPage: params.perPage,
diff --git a/packages/ra-core/src/controller/input/useReferenceInputController.ts b/packages/ra-core/src/controller/input/useReferenceInputController.ts
@@ -84,6 +84,7 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
         pageInfo,
         isFetching: isFetchingPossibleValues,
         isLoading: isLoadingPossibleValues,
+        isPaused: isPausedPossibleValues,
         isPending: isPendingPossibleValues,
         error: errorPossibleValues,
         refetch: refetchGetList,
@@ -112,6 +113,7 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
         error: errorReference,
         isLoading: isLoadingReference,
         isFetching: isFetchingReference,
+        isPaused: isPausedReference,
         isPending: isPendingReference,
     } = useReference<RecordType>({
         id: currentValue,
@@ -128,6 +130,7 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
         // The reference query isn't enabled when there is no value yet but as it has no data, react-query will flag it as pending
         (currentValue != null && currentValue !== '' && isPendingReference) ||
         isPendingPossibleValues;
+    const isPaused = isPausedPossibleValues || isPausedReference;
 
     // We need to delay the update of the referenceRecord and the finalData
     // to the next React state update, because otherwise it can raise a warning
@@ -176,7 +179,8 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
         hideFilter: paramsModifiers.hideFilter,
         isFetching: isFetchingReference || isFetchingPossibleValues,
         isLoading: isLoadingReference || isLoadingPossibleValues,
-        isPending: isPending,
+        isPaused,
+        isPending,
         page: params.page,
         perPage: params.perPage,
         refetch,
diff --git a/packages/ra-core/src/form/choices/ChoicesContext.ts b/packages/ra-core/src/form/choices/ChoicesContext.ts
@@ -20,6 +20,7 @@ export type ChoicesContextBaseValue<RecordType extends RaRecord = any> = {
     hideFilter: (filterName: string) => void;
     isFetching: boolean;
     isLoading: boolean;
+    isPaused: boolean;
     page: number;
     perPage: number;
     refetch: (() => void) | UseGetListHookValue<RecordType>['refetch'];
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx
@@ -19,6 +19,7 @@ import { ReferenceArrayInput } from './ReferenceArrayInput';
 import { AutocompleteArrayInput } from './AutocompleteArrayInput';
 import { SelectArrayInput } from './SelectArrayInput';
 import { CheckboxGroupInput } from './CheckboxGroupInput';
+import { Typography } from '@mui/material';
 
 export default { title: 'ra-ui-materialui/input/ReferenceArrayInput' };
 
@@ -74,6 +75,51 @@ export const Basic = () => (
     </TestMemoryRouter>
 );
 
+const LoadChildrenOnDemand = ({ children }: { children: React.ReactNode }) => {
+    const [showChildren, setShowChildren] = React.useState(false);
+    const handleClick = () => {
+        setShowChildren(true);
+    };
+    return showChildren ? (
+        children
+    ) : (
+        <div>
+            <Typography variant="body2" gutterBottom>
+                Don't forget to go offline first
+            </Typography>
+            <button onClick={handleClick}>Load Children</button>
+        </div>
+    );
+};
+
+export const Offline = () => (
+    <TestMemoryRouter initialEntries={['/posts/create']}>
+        <Admin dataProvider={dataProvider}>
+            <Resource name="tags" recordRepresentation={'name'} />
+            <Resource
+                name="posts"
+                create={() => (
+                    <Create
+                        resource="posts"
+                        record={{ tags_ids: [1, 3] }}
+                        sx={{ width: 600 }}
+                    >
+                        <SimpleForm>
+                            <LoadChildrenOnDemand>
+                                <ReferenceArrayInput
+                                    reference="tags"
+                                    resource="posts"
+                                    source="tags_ids"
+                                />
+                            </LoadChildrenOnDemand>
+                        </SimpleForm>
+                    </Create>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);
+
 export const WithAutocompleteInput = () => (
     <AdminContext
         dataProvider={dataProvider}
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactElement } from 'react';
+import type { ReactNode } from 'react';
 import {
     InputProps,
     useReferenceArrayInputController,
@@ -8,6 +8,8 @@ import {
     UseReferenceArrayInputParams,
 } from 'ra-core';
 import { AutocompleteArrayInput } from './AutocompleteArrayInput';
+import { Labeled } from '../Labeled';
+import { Offline } from '../Offline';
 
 /**
  * An Input component for fields containing a list of references to another resource.
@@ -82,6 +84,7 @@ export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => {
         reference,
         sort,
         filter = defaultFilter,
+        offline,
     } = props;
     if (React.Children.count(children) !== 1) {
         throw new Error(
@@ -95,7 +98,13 @@ export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => {
         filter,
     });
 
-    return (
+    return controllerProps.isPaused ? (
+        offline ?? (
+            <Labeled {...props}>
+                <Offline />
+            </Labeled>
+        )
+    ) : (
         <ResourceContextProvider value={reference}>
             <ChoicesContextProvider value={controllerProps}>
                 {children}
@@ -110,7 +119,8 @@ const defaultFilter = {};
 export interface ReferenceArrayInputProps
     extends InputProps,
         UseReferenceArrayInputParams {
-    children?: ReactElement;
+    children?: ReactNode;
     label?: string;
+    offline?: ReactNode;
     [key: string]: any;
 }
diff --git a/packages/ra-ui-materialui/src/input/ReferenceInput.stories.tsx b/packages/ra-ui-materialui/src/input/ReferenceInput.stories.tsx
@@ -109,6 +109,54 @@ export const Basic = ({ dataProvider = dataProviderWithAuthors }) => (
     </TestMemoryRouter>
 );
 
+const LoadChildrenOnDemand = ({ children }: { children: React.ReactNode }) => {
+    const [showChildren, setShowChildren] = React.useState(false);
+    const handleClick = () => {
+        setShowChildren(true);
+    };
+    return showChildren ? (
+        children
+    ) : (
+        <div>
+            <Typography variant="body2" gutterBottom>
+                Don't forget to go offline first
+            </Typography>
+            <button onClick={handleClick}>Load Children</button>
+        </div>
+    );
+};
+
+const BookEditOffline = () => (
+    <Edit
+        mutationMode="pessimistic"
+        mutationOptions={{
+            onSuccess: data => {
+                console.log(data);
+            },
+        }}
+    >
+        <SimpleForm>
+            <LoadChildrenOnDemand>
+                <ReferenceInput reference="authors" source="author" />
+            </LoadChildrenOnDemand>
+        </SimpleForm>
+    </Edit>
+);
+
+export const Offline = ({ dataProvider = dataProviderWithAuthors }) => (
+    <TestMemoryRouter initialEntries={['/books/1']}>
+        <Admin dataProvider={dataProvider}>
+            <Resource
+                name="authors"
+                recordRepresentation={record =>
+                    `${record.first_name} ${record.last_name}`
+                }
+            />
+            <Resource name="books" edit={BookEditOffline} />
+        </Admin>
+    </TestMemoryRouter>
+);
+
 const tags = [
     { id: 5, name: 'lorem' },
     { id: 6, name: 'ipsum' },
diff --git a/packages/ra-ui-materialui/src/input/ReferenceInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceInput.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ReferenceInputBase, ReferenceInputBaseProps } from 'ra-core';
 
 import { AutocompleteInput } from './AutocompleteInput';
+import { Offline } from '../Offline';
+import { Labeled } from '../Labeled';
 
 /**
  * An Input component for choosing a reference record. Useful for foreign keys.
@@ -64,15 +66,28 @@ import { AutocompleteInput } from './AutocompleteInput';
  * a `setFilters` function. You can call this function to filter the results.
  */
 export const ReferenceInput = (props: ReferenceInputProps) => {
-    const { children = defaultChildren, ...rest } = props;
+    const { children = defaultChildren, offline, ...rest } = props;
 
     if (props.validate && process.env.NODE_ENV !== 'production') {
         throw new Error(
             '<ReferenceInput> does not accept a validate prop. Set the validate prop on the child instead.'
         );
     }
 
-    return <ReferenceInputBase {...rest}>{children}</ReferenceInputBase>;
+    return (
+        <ReferenceInputBase
+            {...rest}
+            offline={
+                offline ?? (
+                    <Labeled {...rest}>
+                        <Offline />
+                    </Labeled>
+                )
+            }
+        >
+            {children}
+        </ReferenceInputBase>
+    );
 };
 
 const defaultChildren = <AutocompleteInput />;
@@ -82,5 +97,6 @@ export interface ReferenceInputProps extends ReferenceInputBaseProps {
      * Call validate on the child component instead
      */
     validate?: never;
+    offline?: ReactNode;
     [key: string]: any;
 }
