Fix reference fields and inputs

djhi · djhi · commit b03dfb4b3fdc · 2025-06-26T17:04:01.000+02:00
diff --git a/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts b/packages/ra-core/src/controller/input/useReferenceArrayInputController.ts
@@ -63,6 +63,7 @@ export const useReferenceArrayInputController = <
         isFetching: isFetchingGetMany,
         isPaused: isPausedGetMany,
         isPending: isPendingGetMany,
+        isPlaceholderData: isPlaceholderDataGetMany,
         refetch: refetchGetMany,
     } = useGetManyAggregate<RecordType>(
         reference,
@@ -102,6 +103,7 @@ export const useReferenceArrayInputController = <
         isFetching: isFetchingGetList,
         isPaused: isPausedGetList,
         isPending: isPendingGetList,
+        isPlaceholderData: isPlaceholderDataGetList,
         refetch: refetchGetMatching,
     } = useGetList<RecordType>(
         reference,
@@ -157,6 +159,7 @@ export const useReferenceArrayInputController = <
         isLoading: isLoadingGetMany || isLoadingGetList,
         isPaused: isPausedGetMany || isPausedGetList,
         isPending: isPendingGetMany || isPendingGetList,
+        isPlaceholderData: isPlaceholderDataGetMany || isPlaceholderDataGetList,
         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
@@ -21,6 +21,7 @@ export type ChoicesContextBaseValue<RecordType extends RaRecord = any> = {
     isFetching: boolean;
     isLoading: boolean;
     isPaused: boolean;
+    isPlaceholderData: boolean;
     page: number;
     perPage: number;
     refetch: (() => void) | UseGetListHookValue<RecordType>['refetch'];
diff --git a/packages/ra-core/src/form/choices/useChoicesContext.ts b/packages/ra-core/src/form/choices/useChoicesContext.ts
@@ -21,6 +21,8 @@ export const useChoicesContext = <ChoicesType extends RaRecord = RaRecord>(
         isLoading: options.isLoading ?? false,
         isPending: options.isPending ?? false,
         isFetching: options.isFetching ?? false,
+        isPaused: options.isPaused ?? false,
+        isPlaceholderData: options.isPlaceholderData ?? false,
         error: options.error,
         // When not in a ChoicesContext, paginating does not make sense (e.g. AutocompleteInput).
         perPage: Infinity,
@@ -44,6 +46,8 @@ export const useChoicesContext = <ChoicesType extends RaRecord = RaRecord>(
                 isLoading: list.isLoading ?? false, // we must take the one for useList, otherwise the loading state isn't synchronized with the data
                 isPending: list.isPending ?? false, // same
                 isFetching: list.isFetching ?? false, // same
+                isPaused: list.isPaused ?? false, // same
+                isPlaceholderData: list.isPlaceholderData ?? false, // same
                 page: options.page ?? list.page,
                 perPage: options.perPage ?? list.perPage,
                 refetch: options.refetch ?? list.refetch,
diff --git a/packages/ra-ui-materialui/src/Labeled.tsx b/packages/ra-ui-materialui/src/Labeled.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ElementType, ReactElement } from 'react';
+import type { ElementType, ReactElement, ReactNode } from 'react';
 import {
     Stack,
     type StackProps,
@@ -45,6 +45,14 @@ export const Labeled = (inProps: LabeledProps) => {
         ...rest
     } = props;
 
+    const childrenProps = React.isValidElement(children) ? children.props : {};
+    const isLabeled = React.isValidElement(children)
+        ? // @ts-ignore
+          children.type?.displayName === 'Labeled'
+        : false;
+    const shouldAddLabel =
+        label !== false && childrenProps.label !== false && !isLabeled;
+
     return (
         <Root
             // @ts-ignore https://github.com/mui/material-ui/issues/29875
@@ -54,13 +62,7 @@ export const Labeled = (inProps: LabeledProps) => {
             })}
             {...rest}
         >
-            {label !== false &&
-            children.props.label !== false &&
-            typeof children.type !== 'string' &&
-            // @ts-ignore
-            children.type?.displayName !== 'Labeled' &&
-            // @ts-ignore
-            children.type?.displayName !== 'Labeled' ? (
+            {shouldAddLabel ? (
                 <Typography
                     sx={
                         color
@@ -75,8 +77,8 @@ export const Labeled = (inProps: LabeledProps) => {
                     {...TypographyProps}
                 >
                     <FieldTitle
-                        label={label || children.props.label}
-                        source={source || children.props.source}
+                        label={label || childrenProps.label}
+                        source={source || childrenProps.source}
                         resource={resource}
                         isRequired={isRequired}
                     />
@@ -90,7 +92,7 @@ export const Labeled = (inProps: LabeledProps) => {
 Labeled.displayName = 'Labeled';
 
 export interface LabeledProps extends StackProps {
-    children: ReactElement;
+    children: ReactNode;
     className?: string;
     color?:
         | ResponsiveStyleValue<Property.Color | Property.Color[]>
diff --git a/packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx
@@ -108,7 +108,11 @@ export const Offline = () => (
 );
 
 export const OfflineWithChildren = () => (
-    <AdminContext dataProvider={dataProvider} defaultTheme="light">
+    <AdminContext
+        dataProvider={dataProvider}
+        i18nProvider={polyglotI18nProvider(() => englishMessages)}
+        defaultTheme="light"
+    >
         <ResourceDefinitionContextProvider definitions={resouceDefs}>
             <Show resource="bands" id={1} sx={{ width: 600 }}>
                 <SimpleShowLayout>
@@ -117,11 +121,13 @@ export const OfflineWithChildren = () => (
                         <ReferenceArrayField
                             source="members"
                             reference="artists"
+                            perPage={5}
                         >
                             <Datagrid bulkActionButtons={false}>
                                 <TextField source="id" />
                                 <TextField source="name" />
                             </Datagrid>
+                            <Pagination />
                         </ReferenceArrayField>
                     </LoadChildrenOnDemand>
                 </SimpleShowLayout>
diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx
@@ -8,7 +8,7 @@ import {
 } from 'ra-core';
 import { Admin, ListGuesser, Resource } from 'react-admin';
 import type { AdminProps } from 'react-admin';
-import { ThemeProvider, Box, Stack } from '@mui/material';
+import { ThemeProvider, Box, Stack, Typography } from '@mui/material';
 import { createTheme } from '@mui/material/styles';
 import fakeDataProvider from 'ra-data-fakerest';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
@@ -123,6 +123,40 @@ export const Basic = () => (
     </Wrapper>
 );
 
+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 = () => (
+    <Wrapper record={authors[3]}>
+        <LoadChildrenOnDemand>
+            <ReferenceManyField
+                reference="books"
+                target="author_id"
+                pagination={<Pagination />}
+                perPage={5}
+            >
+                <Datagrid>
+                    <TextField source="title" />
+                </Datagrid>
+            </ReferenceManyField>
+        </LoadChildrenOnDemand>
+    </Wrapper>
+);
+
 export const WithSingleFieldList = () => (
     <Wrapper>
         <ReferenceManyField reference="books" target="author_id">
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -48,6 +48,7 @@ import {
 import type { CommonInputProps } from './CommonInputProps';
 import { InputHelperText } from './InputHelperText';
 import { sanitizeInputRestProps } from './sanitizeInputRestProps';
+import { Offline } from '../Offline';
 
 const defaultFilterOptions = createFilterOptions();
 
@@ -161,13 +162,15 @@ export const AutocompleteInput = <
         isRequired: isRequiredOverride,
         label,
         limitChoicesToValue,
+        loadingText = 'ra.message.loading',
         matchSuggestion,
         margin,
         fieldState: fieldStateOverride,
         filterToQuery: filterToQueryProp = DefaultFilterToQuery,
         formState: formStateOverride,
         multiple = false,
         noOptionsText,
+        offline = defaultOffline,
         onBlur,
         onChange,
         onCreate,
@@ -197,6 +200,8 @@ export const AutocompleteInput = <
     const {
         allChoices,
         isPending,
+        isPaused,
+        isPlaceholderData,
         error: fetchError,
         resource,
         source,
@@ -610,12 +615,22 @@ 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);
+
     return (
         <>
             <StyledAutocomplete
                 className={clsx('ra-input', `ra-input-${source}`, className)}
                 clearText={translate(clearText, { _: clearText })}
                 closeText={translate(closeText, { _: closeText })}
+                loadingText={
+                    isPaused && isPlaceholderData
+                        ? offline
+                        : typeof loadingText === 'string'
+                          ? translate(loadingText, {
+                                _: loadingText,
+                            })
+                          : loadingText
+                }
                 openOnFocus
                 openText={translate(openText, { _: openText })}
                 id={id}
@@ -717,17 +732,20 @@ If you provided a React element for the optionText prop, you must also provide t
                 handleHomeEndKeys={!!create || !!onCreate}
                 filterOptions={filterOptions}
                 options={
-                    shouldRenderSuggestions == undefined || // eslint-disable-line eqeqeq
-                    shouldRenderSuggestions(filterValue)
-                        ? suggestions
-                        : []
+                    isPaused && isPlaceholderData
+                        ? []
+                        : shouldRenderSuggestions == undefined || // eslint-disable-line eqeqeq
+                            shouldRenderSuggestions(filterValue)
+                          ? suggestions
+                          : []
                 }
                 getOptionLabel={getOptionLabel}
                 inputValue={filterValue}
                 loading={
-                    isPending &&
-                    (!finalChoices || finalChoices.length === 0) &&
-                    oneSecondHasPassed
+                    (isPending &&
+                        (!finalChoices || finalChoices.length === 0) &&
+                        oneSecondHasPassed) ||
+                    (isPaused && isPlaceholderData)
                 }
                 value={selectedChoice}
                 onChange={handleAutocompleteChange}
@@ -798,6 +816,7 @@ export interface AutocompleteInputProps<
     emptyValue?: any;
     filterToQuery?: (searchText: string) => any;
     inputText?: (option: any) => string;
+    offline?: ReactNode;
     onChange?: (
         // We can't know upfront what the value type will be
         value: Multiple extends true ? any[] : any,
@@ -912,6 +931,7 @@ const areSelectedItemsEqual = (
 };
 
 const DefaultFilterToQuery = searchText => ({ q: searchText });
+const defaultOffline = <Offline variant="inline" />;
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx
@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-    DataProvider,
-    Form,
-    testDataProvider,
-    TestMemoryRouter,
-} from 'ra-core';
+import { DataProvider, Form, TestMemoryRouter } from 'ra-core';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
 import { Admin, Resource } from 'react-admin';
@@ -29,23 +24,21 @@ const tags = [
     { id: 2, name: 'Design' },
     { id: 3, name: 'Painting' },
     { id: 4, name: 'Photography' },
+    { id: 5, name: 'Sculpture' },
+    { id: 6, name: 'Urbanism' },
+    { id: 7, name: 'Video' },
+    { id: 8, name: 'Web' },
+    { id: 9, name: 'Writing' },
+    { id: 10, name: 'Other' },
 ];
 
-const dataProvider = testDataProvider({
-    // @ts-ignore
-    getList: () =>
-        Promise.resolve({
-            data: tags,
-            total: tags.length,
-        }),
-    // @ts-ignore
-    getMany: (resource, params) => {
-        console.log('getMany', resource, params);
-        return Promise.resolve({
-            data: params.ids.map(id => tags.find(tag => tag.id === id)),
-        });
+const dataProvider = fakeRestProvider(
+    {
+        tags,
     },
-});
+    process.env.NODE_ENV !== 'test',
+    process.env.NODE_ENV !== 'test' ? 300 : 0
+);
 
 const i18nProvider = polyglotI18nProvider(() => englishMessages);
 
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx
@@ -100,15 +100,13 @@ export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => {
     const { isPaused, allChoices } = controllerProps;
 
     return isPaused && allChoices == null ? (
-        offline ?? (
-            <Labeled
-                source={props.source}
-                label={props.label}
-                resource={props.resource}
-            >
-                <Offline variant="inline" />
-            </Labeled>
-        )
+        <Labeled
+            source={props.source}
+            label={props.label}
+            resource={props.resource}
+        >
+            {offline ?? <Offline variant="inline" />}
+        </Labeled>
     ) : (
         <ResourceContextProvider value={reference}>
             <ChoicesContextProvider value={controllerProps}>
diff --git a/packages/ra-ui-materialui/src/input/ReferenceInput.stories.tsx b/packages/ra-ui-materialui/src/input/ReferenceInput.stories.tsx
diff --git a/packages/ra-ui-materialui/src/input/ReferenceInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceInput.tsx
