Bug: 3.13.0 causes strange behaviour with ReferenceArrayInputs inside of ArrayInputs

[andrico1234]

This one was a pain to repro and find a workaround for. 😅

I couldn't recreate it on the Codesandbox so I made a branch for it. It can be found at repro/break-ra To run the repro, you'll need to run make run-simple and then navigate to the PostEdit screen.

This broke with the latest version of RA: 3.13.0. I imagine this has something to do with the addition of the ListContext to ReferenceArrayInput. I might be wrong though.

Basically I don't know why this happens, but when I pass through the same /basePath present in the Edit component everything works totally fine. When I wrap the ReferencyArrayInput in a FormDataConsumer the basePath in the ...rest inside of the ArrayInput was undefined (but this was the case for earlier versions). So I can only imagine that ReferenceArrayInputs lost this value with the addition of the new ListContext. 🤷

I know the last sentence was hella complicated, but I hope I was clear enough.

Code Snippet

import * as React from 'react';
import {
    Edit,
    FormTab,
    ReferenceArrayInput,
    AutocompleteArrayInput,
    ArrayInput,
    SimpleFormIterator,
    TabbedForm,
} from 'react-admin';

const PostEdit = props => (
    <Edit {...props}>
        <TabbedForm>
            <FormTab label="Array">
                <ArrayInput source="related">
                    <SimpleFormIterator>
                        <ReferenceArrayInput
                            //broken when basePath is omitted
                            basePath="/comments"
                            source="comments"
                            label="Comments"
                            reference="comments"
                        >
                            <AutocompleteArrayInput
                                optionText={record => {
                                    if (!record) return null;

                                    return `${record.id}`;
                                }}
                            />
                        </ReferenceArrayInput>
                    </SimpleFormIterator>
                </ArrayInput>
            </FormTab>
        </TabbedForm>
    </Edit>
);

export default PostEdit;

Error Trace

Uncaught TypeError: Cannot read property 'replace' of undefined
    at useReferenceArrayInputController (useReferenceArrayInputController.ts:299)
    at ReferenceArrayInput (ReferenceArrayInput.tsx:146)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
2react-dom.development.js:20085 The above error occurred in the <ReferenceArrayInput> component:

    at ReferenceArrayInput (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx:14:3)
    at FormDataConsumerView (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormDataConsumer.tsx:31:3)
    at FormDataConsumer (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormDataConsumer.tsx:11:3)
    at div
    at FormInput (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/form/FormInput.tsx:30:5)
    at section
    at li
    at Transition2 (http://localhost:8080/node_modules/.vite/chunk.SM7IABYG.js?v=74e70380:109:30)
    at CSSTransition2 (http://localhost:8080/node_modules/.vite/chunk.SM7IABYG.js?v=74e70380:377:35)
    at TransitionGroup2 (http://localhost:8080/node_modules/.vite/chunk.SM7IABYG.js?v=74e70380:626:30)
    at ul
    at SimpleFormIterator (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx:123:5)
    at div
    at FormControl2 (http://localhost:8080/node_modules/.vite/chunk.YS4RP6V3.js?v=74e70380:73:5)
    at WithStyles(ForwardRef(FormControl2)) (http://localhost:8080/node_modules/.vite/chunk.WUP7IKFR.js?v=74e70380:362:31)
    at ArrayInput (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/input/ArrayInput.tsx:18:3)
    at div
    at FormInput (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/form/FormInput.tsx:30:5)
    at span
    at FormGroupContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormGroupContextProvider.tsx:10:3)
    at FormTab (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/form/FormTab.tsx:12:3)
    at Route2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:736:29)
    at div
    at form
    at TabbedFormView (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/form/TabbedFormView.tsx:24:5)
    at FormView (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormWithRedirect.tsx:136:3)
    at ReactFinalForm (http://localhost:8080/node_modules/.vite/react-final-form.js?v=74e70380:1171:20)
    at FormContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormContextProvider.tsx:5:3)
    at FormWithRedirect (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormWithRedirect.tsx:22:3)
    at TabbedForm
    at div
    at Paper2 (http://localhost:8080/node_modules/.vite/chunk.PTCA4WMY.js?v=74e70380:52:5)
    at WithStyles(ForwardRef(Paper2)) (http://localhost:8080/node_modules/.vite/chunk.WUP7IKFR.js?v=74e70380:362:31)
    at Card2 (http://localhost:8080/node_modules/.vite/chunk.ABQ56JSS.js?v=74e70380:36:5)
    at WithStyles(ForwardRef(Card2)) (http://localhost:8080/node_modules/.vite/chunk.WUP7IKFR.js?v=74e70380:362:31)
    at div
    at div
    at EditView (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/detail/EditView.tsx:22:5)
    at RecordContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/controller/RecordContext.tsx:14:3)
    at SaveContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/controller/details/SaveContext.tsx:14:3)
    at EditContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/controller/details/EditContextProvider.tsx:9:3)
    at ResourceContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/ResourceContextProvider.tsx:5:3)
    at Edit (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/detail/Edit.tsx:12:3)
    at PostEdit (http://localhost:8080/src/posts/PostEdit.tsx?t=1614379231108:20:3)
    at WithPermissions (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/auth/WithPermissions.tsx:13:3)
    at Route2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:736:29)
    at Switch2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:880:29)
    at ResourceContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/ResourceContextProvider.tsx:5:3)
    at ResourceRoutes (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/Resource.tsx:50:3)
    at Resource (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/Resource.tsx:123:3)
    at Route2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:736:29)
    at Switch2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:880:29)
    at RoutesWithLayout (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/RoutesWithLayout.tsx:13:3)
    at div
    at main
    at div
    at div
    at LayoutWithoutTheme (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/layout/Layout.tsx:75:5)
    at WithStyles(LayoutWithoutTheme) (http://localhost:8080/node_modules/.vite/chunk.WUP7IKFR.js?v=74e70380:362:31)
    at withRouter(WithStyles(LayoutWithoutTheme)) (http://localhost:8080/node_modules/.vite/react-router-dom.js?v=74e70380:55:37)
    at Connect(withRouter(WithStyles(LayoutWithoutTheme))) (http://localhost:8080/node_modules/.vite/chunk.WKYBQRDE.js?v=74e70380:267:36)
    at ThemeProvider (http://localhost:8080/node_modules/.vite/chunk.UUAIWACW.js?v=74e70380:185:24)
    at Layout (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/layout/Layout.tsx:184:10)
    at default
    at Route2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:736:29)
    at Switch2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:880:29)
    at div
    at CoreAdminRouter (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/CoreAdminRouter.tsx:18:26)
    at Route2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:736:29)
    at Switch2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:880:29)
    at CoreAdminUI (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/CoreAdminUI.tsx:20:3)
    at AdminUI
    at Router2 (http://localhost:8080/node_modules/.vite/chunk.4H6LEB5I.js?v=74e70380:464:30)
    at ConnectedRouter3 (http://localhost:8080/node_modules/.vite/connected-react-router.js?v=74e70380:229:7)
    at ConnectedRouterWithContext2 (http://localhost:8080/node_modules/.vite/connected-react-router.js?v=74e70380:297:25)
    at Connect(ConnectedRouterWithContext2) (http://localhost:8080/node_modules/.vite/chunk.WKYBQRDE.js?v=74e70380:267:36)
    at TranslationProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/i18n/TranslationProvider.tsx:15:5)
    at Provider (http://localhost:8080/node_modules/.vite/chunk.WKYBQRDE.js?v=74e70380:165:20)
    at CoreAdminContext (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/CoreAdminContext.tsx:17:3)
    at AdminContext
    at Admin (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/react-admin/src/Admin.tsx:7:3)

[andrico1234]

Note, everything works perfectly fine in my project when i provide the basePathmanually

[redaguermas]

1- Major issue, I can't use the ReferenceArrayInput component with the "AutocompleteArrayInput" component in it. It keeps throwing and error on this file "ra-core/esm/controller/input/useReferenceArrayInputController.js" at line 125. This is the exception "useReferenceArrayInputController.js:125 Uncaught TypeError: newIds.forEach is not a function". Need to convert newIds to an array in order to use the forEach function.
2- Minor issue, why is the basePath required on this component now? I keep getting an error when I omit 'basePath'.

[andrico1234]

1- Major issue, I can't use the ReferenceArrayInput component with the "AutocompleteArrayInput" component in it. It keeps throwing and error on this file "ra-core/esm/controller/input/useReferenceArrayInputController.js" at line 125. This is the exception "useReferenceArrayInputController.js:125 Uncaught TypeError: newIds.forEach is not a function". Need to convert newIds to an array in order to use the forEach function.

Funnily enough, I came across this when trying to come up with a repro case for my issue. Eventually it went away, but I don't know how I caused it, or why it was fixed.

[djhi]

@andrico1234 Thanks for the report. Your fork doesn't seem to have any difference with the main repository though. Would you mind updating it?

[andrico1234]

@djhi , are you able to see the comparison here?

Edit: I've simplified the ./examples/simple/src/posts/PostEdit.tsx even further

[djhi]

Thanks, I reproduced it locally and made a PR to fix it