Correctly handle offline case in ReferenceInputBase

Author: djhi

packages/ra-core/src/controller/input/ReferenceInputBase.stories.tsx

@@ -28,7 +28,7 @@ import {
 } from '../..';
 
 export default {
-    title: 'ra-core/input/ReferenceInputBase',
+    title: 'ra-core/controller/input/ReferenceInputBase',
     excludeStories: ['dataProviderWithAuthors'],
 };
 
@@ -526,7 +526,7 @@ export const Meta = ({
 
 export const Offline = () => (
     <CoreAdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
-        <Form onSubmit={() => {}} defaultValues={{ tag_ids: [5] }}>
+        <Form onSubmit={() => {}} defaultValues={{ tag_ids: 5 }}>
             <div
                 style={{
                     width: '200px',

packages/ra-core/src/controller/input/ReferenceInputBase.tsx

@@ -79,14 +79,12 @@ export const ReferenceInputBase = (props: ReferenceInputBaseProps) => {
         filter,
     });
 
-    const { isPaused, allChoices } = controllerProps;
-
+    const { isPaused, isPending } = controllerProps;
+    // isPending is true: there's no cached data and no query attempt was finished yet
+    // isPaused is true: the query was paused (e.g. due to a network issue)
+    // Both true: we're offline and have no data to show
     const shouldRenderOffline =
-        isPaused &&
-        // TODO v6: we can't rely on isPlaceHolderData here because useReferenceInputController always return at least an empty array
-        allChoices?.length === 0 &&
-        offline !== false &&
-        offline !== undefined;
+        isPaused && isPending && offline !== undefined && offline !== false;
 
     return (
         <ResourceContextProvider value={reference}>

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

@@ -141,8 +141,6 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
         isPendingPossibleValues;
 
     const isPaused = isPausedReference || isPausedPossibleValues;
-    const isPlaceholderData =
-        isPlaceholderDataReference || isPlaceholderDataPossibleValues;
 
     // 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
@@ -212,7 +210,9 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
                 isLoading: isLoadingReference || isLoadingPossibleValues,
                 isPaused: isPausedReference || isPausedPossibleValues,
                 isPending,
-                isPlaceholderData,
+                isPlaceholderData:
+                    isPlaceholderDataReference ||
+                    isPlaceholderDataPossibleValues,
                 page: params.page,
                 perPage: params.perPage,
                 refetch,
@@ -248,7 +248,8 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
             isPausedPossibleValues,
             isPausedReference,
             isPending,
-            isPlaceholderData,
+            isPlaceholderDataReference,
+            isPlaceholderDataPossibleValues,
             pageInfo,
             params.displayedFilters,
             params.filter,

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

@@ -626,14 +626,11 @@ If you provided a React element for the optionText prop, you must also provide t
     const renderHelperText = !!fetchError || helperText !== false || invalid;
 
     const handleInputRef = useForkRef(field.ref, TextFieldProps?.inputRef);
-    // When there is no network connectivity and we weren't even able to load the current value
-    if (
-        isPaused &&
-        offline !== false &&
-        offline !== undefined &&
-        ((field.value != null && selectedChoice == null) ||
-            suggestions.length === 0)
-    ) {
+    // isPending is true: there's no cached data and no query attempt was finished yet
+    // isPaused is true: the query was paused (e.g. due to a network issue)
+    // Both true: we're offline, have no data to show
+    // If the component that provides the ChoicesContext does not handle this case, we should should render the offline element
+    if (isPending && isPaused && offline !== false && offline !== undefined) {
         return offline;
     }
 

packages/ra-ui-materialui/src/input/ReferenceInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ReferenceInputBase, ReferenceInputBaseProps } from 'ra-core';
-
+import { Offline } from '../Offline';
 import { AutocompleteInput } from './AutocompleteInput';
 
 /**
@@ -64,19 +64,27 @@ 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 = defaultOffline,
+        ...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}>
+            {children}
+        </ReferenceInputBase>
+    );
 };
 
 const defaultChildren = <AutocompleteInput />;
-
+const defaultOffline = <Offline variant="inline" />;
 export interface ReferenceInputProps extends ReferenceInputBaseProps {
     /**
      * Call validate on the child component instead