Merge pull request #9197 from marmelab/Fix-referenceinput-queryoptions

Fix `<ReferenceInput queryOptions>` does not apply to getMany query

Author: djhi

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

@@ -114,9 +114,11 @@ export const useReferenceInputController = <RecordType extends RaRecord = any>(
     } = useReference<RecordType>({
         id: currentValue,
         reference,
+        // @ts-ignore the types of the queryOptions for the getMAny and getList are not compatible
         options: {
             enabled: currentValue != null && currentValue !== '',
             meta,
+            ...otherQueryOptions,
         },
     });
 

packages/ra-ui-materialui/src/detail/EditView.tsx

@@ -73,7 +73,6 @@ interface EditViewProps
 EditView.propTypes = {
     actions: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
     aside: PropTypes.element,
-    children: PropTypes.element,
     className: PropTypes.string,
     component: ComponentPropType,
     defaultTitle: PropTypes.any,

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

@@ -17,6 +17,7 @@ import {
     WithSelectInput,
     dataProviderWithAuthors,
     SelfReference,
+    QueryOptions,
 } from './ReferenceInput.stories';
 
 describe('<ReferenceInput />', () => {
@@ -26,6 +27,10 @@ describe('<ReferenceInput />', () => {
         source: 'post_id',
     };
 
+    beforeAll(() => {
+        window.scrollTo = jest.fn();
+    });
+
     it('should display an error if error is defined', async () => {
         jest.spyOn(console, 'error')
             .mockImplementationOnce(() => {})
@@ -155,6 +160,16 @@ describe('<ReferenceInput />', () => {
         });
     });
 
+    it('should pass queryOptions to both queries', async () => {
+        render(<QueryOptions />);
+        await waitFor(() => new Promise(resolve => setTimeout(resolve, 100)));
+        expect(screen.queryByDisplayValue('Leo Tolstoy')).toBeNull();
+        fireEvent.click(screen.getByText('Toggle queryOptions'));
+        await waitFor(() => {
+            expect(screen.queryByDisplayValue('Leo Tolstoy')).not.toBeNull();
+        });
+    });
+
     it('should convert empty values to null with AutocompleteInput', async () => {
         jest.spyOn(console, 'log').mockImplementationOnce(() => {});
         const dataProvider = {

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

@@ -5,7 +5,9 @@ import { QueryClient } from 'react-query';
 import { Resource, Form, testDataProvider, useRedirect } from 'ra-core';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
-import { Stack, Divider, Typography } from '@mui/material';
+import fakeRestDataProvider from 'ra-data-fakerest';
+import { Stack, Divider, Typography, Button } from '@mui/material';
+import { MemoryRouter } from 'react-router-dom';
 
 import { Edit } from '../detail';
 import { SimpleForm } from '../form';
@@ -507,3 +509,85 @@ export const SelfReference = ({ dataProvider = dataProviderWithAuthors }) => (
         <Resource name="books" edit={BookEditWithSelfReference} />
     </Admin>
 );
+
+const BookEditQueryOptions = () => {
+    const [enabled, setEnabled] = React.useState(false);
+    return (
+        <Edit mutationMode="pessimistic">
+            <Button onClick={() => setEnabled(!enabled)}>
+                Toggle queryOptions
+            </Button>
+            <SimpleForm>
+                <TextInput source="title" />
+                <ReferenceInput
+                    reference="authors"
+                    source="author"
+                    queryOptions={{ enabled }}
+                />
+            </SimpleForm>
+        </Edit>
+    );
+};
+
+export const QueryOptions = () => (
+    <MemoryRouter initialEntries={['/books/1']}>
+        <Admin
+            dataProvider={fakeRestDataProvider(
+                {
+                    books: [
+                        {
+                            id: 1,
+                            title: 'War and Peace',
+                            author: 1,
+                            summary:
+                                "War and Peace broadly focuses on Napoleon's invasion of Russia, and the impact it had on Tsarist society. The book explores themes such as revolution, revolution and empire, the growth and decline of various states and the impact it had on their economies, culture, and society.",
+                            year: 1869,
+                        },
+                    ],
+                    authors: [
+                        {
+                            id: 1,
+                            first_name: 'Leo',
+                            last_name: 'Tolstoy',
+                            language: 'Russian',
+                        },
+                        {
+                            id: 2,
+                            first_name: 'Victor',
+                            last_name: 'Hugo',
+                            language: 'French',
+                        },
+                        {
+                            id: 3,
+                            first_name: 'William',
+                            last_name: 'Shakespeare',
+                            language: 'English',
+                        },
+                        {
+                            id: 4,
+                            first_name: 'Charles',
+                            last_name: 'Baudelaire',
+                            language: 'French',
+                        },
+                        {
+                            id: 5,
+                            first_name: 'Marcel',
+                            last_name: 'Proust',
+                            language: 'French',
+                        },
+                    ],
+                },
+                process.env.NODE_ENV === 'development'
+            )}
+        >
+            <Resource
+                name="authors"
+                recordRepresentation={record =>
+                    `${record.first_name} ${record.last_name}`
+                }
+                list={AuthorList}
+            />
+            <Resource name="books" edit={BookEditQueryOptions} />
+        </Admin>
+    </MemoryRouter>
+);