Fix ReferenceArrayInput Passing Wrong Props to Children

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

@@ -13,8 +13,8 @@ describe('<ReferenceArrayInputController />', () => {
     const defaultProps = {
         input: { value: undefined },
         record: undefined,
-        basePath: '/tags',
         reference: 'tags',
+        basePath: '/posts',
         resource: 'posts',
         source: 'tag_ids',
     };
@@ -884,4 +884,25 @@ describe('<ReferenceArrayInputController />', () => {
             });
         });
     });
+
+    it('should call its children with the correct resource and basePath', () => {
+        const children = jest.fn(() => null);
+        renderWithRedux(
+            <Form
+                onSubmit={jest.fn()}
+                render={() => (
+                    <ReferenceArrayInputController
+                        {...defaultProps}
+                        input={{ value: [1, 2] }}
+                    >
+                        {children}
+                    </ReferenceArrayInputController>
+                )}
+            />,
+            { admin: { resources: { tags: { data: {} } } } }
+        );
+
+        expect(children.mock.calls[0][0].resource).toEqual('posts');
+        expect(children.mock.calls[0][0].basePath).toEqual('/posts');
+    });
 });

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

@@ -42,7 +42,6 @@ export const useReferenceArrayInputController = (
     props: UseReferenceArrayInputOptions
 ): ReferenceArrayInputContextValue & Omit<ListControllerProps, 'setSort'> => {
     const {
-        basePath,
         filter: defaultFilter,
         filterToQuery = defaultFilterToQuery,
         input,
@@ -284,7 +283,7 @@ export const useReferenceArrayInputController = (
     });
 
     return {
-        basePath: basePath.replace(resource, reference),
+        basePath: props.basePath || `/${resource}`,
         choices: dataStatus.choices,
         currentSort: sort,
         // For the ListContext, we don't want to always display the selected items first.

packages/ra-ui-materialui/src/input/ReferenceArrayInput.spec.js

@@ -111,6 +111,28 @@ describe('<ReferenceArrayInput />', () => {
         expect(queryByText(JSON.stringify([]))).not.toBeNull();
     });
 
+    it('should pass the correct resource and basePath down to child component', () => {
+        let resourceProp;
+        let basePathProp;
+        const MyComponent = ({ resource, basePath }) => {
+            resourceProp = resource;
+            basePathProp = basePath;
+            return <div />;
+        };
+        const onChange = jest.fn();
+        render(
+            <ReferenceArrayInputView
+                {...defaultProps}
+                allowEmpty
+                onChange={onChange}
+            >
+                <MyComponent />
+            </ReferenceArrayInputView>
+        );
+        expect(resourceProp).toEqual('tags');
+        expect(basePathProp).toEqual('/tags');
+    });
+
     it('should pass onChange down to child component', () => {
         let onChangeCallback;
         const MyComponent = ({ onChange }) => {

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

@@ -18,6 +18,7 @@ import {
 import sanitizeInputRestProps from './sanitizeInputRestProps';
 import ReferenceError from './ReferenceError';
 import { FieldInputProps, FieldMetaState } from 'react-final-form';
+import { sanitizeListRestProps } from 'ra-core';
 
 export interface ReferenceArrayInputProps extends InputProps {
     allowEmpty?: boolean;
@@ -168,7 +169,7 @@ const ReferenceArrayInput = ({
                         translate={translate}
                         children={children}
                         {...props}
-                        {...controllerProps}
+                        {...sanitizeListRestProps(controllerProps)}
                     />
                 </ListContextProvider>
             </ReferenceArrayInputContextProvider>
@@ -202,11 +203,14 @@ ReferenceArrayInput.defaultProps = {
 };
 
 const sanitizeRestProps = ({
+    basePath,
     crudGetMany,
     crudGetMatching,
     filterToQuery,
     perPage,
+    reference,
     referenceSource,
+    resource,
     ...rest
 }: any) => sanitizeInputRestProps(rest);
 
@@ -277,7 +281,9 @@ export const ReferenceArrayInputView = ({
 
     return React.cloneElement(children, {
         allowEmpty,
-        basePath,
+        basePath: basePath
+            ? basePath.replace(resource, reference)
+            : `/${reference}`,
         choices,
         className,
         error,
@@ -292,7 +298,7 @@ export const ReferenceArrayInputView = ({
         },
         onChange,
         options,
-        resource,
+        resource: reference,
         setFilter,
         setPagination,
         setSort,