Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Broken AutocompleteArrayInput optionText callback #6255

Closed
andrico1234 opened this issue May 7, 2021 · 2 comments · Fixed by #6256
Closed

Bug: Broken AutocompleteArrayInput optionText callback #6255

andrico1234 opened this issue May 7, 2021 · 2 comments · Fixed by #6256
Labels

Comments

@andrico1234
Copy link
Contributor

andrico1234 commented May 7, 2021

What you were expecting:
With the latest update to 3.15, the behaviour of AutocompleteArrayInput's optionText prop has changed.

Passing a string still works fine, but when used as a callback function, an array of values is occasionally passed through as the argument, alongside the regular records.

I'm not sure if this a side effect of the new creating choices API, but this seems to break the bhvaiour described in the documentation:

image

If you paste this in to the PostEdit file in the simple demo, you'll find that the first AutocompleteArrayInput works fine. While the second causes the app to crash. This works in previous versions, and if you look in the console, the value logged is ocassionally a Record or an Record[].

import * as React from 'react';
import {
    Edit,
    FormTab,
    TabbedForm,
    ReferenceArrayInput,
    AutocompleteArrayInput,
} from 'react-admin'; // eslint-disable-line import/no-unresolved

const PostEdit = ({ permissions, ...props }) => (
    <Edit {...props}>
        <TabbedForm>
            <FormTab label="post.form.miscellaneous">
                <ReferenceArrayInput
                    reference="tags"
                    source="tags"
                    label="Tags"
                    filter={{ published: 'music' }}
                >
                    <AutocompleteArrayInput optionText="name.en" />
                </ReferenceArrayInput>

                <ReferenceArrayInput
                    reference="tags"
                    source="tags"
                    label="Tags"
                    filter={{ published: 'music' }}
                >
                    <AutocompleteArrayInput
                        optionText={record => {
                            console.log(record);
                            if (!record) return;

                            return record.name.en;
                        }}
                    />
                </ReferenceArrayInput>
            </FormTab>
        </TabbedForm>
    </Edit>
);

export default PostEdit;

Other information:

Environment

  • React-admin version: 3.15
  • Last version that did not exhibit the issue (if applicable):
  • React version:
  • Browser:
  • Stack trace (in case of a JS error):
TypeError: Cannot read property 'en' of undefined

    at Downshift2 (http://localhost:8080/node_modules/.vite/downshift.js?v=c1ff499c:410:28)
    at AutocompleteArrayInput (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx:32:5)
    at ReferenceArrayInputView (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx:152:3)
    at ListContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/controller/ListContextProvider.tsx:22:3)
    at ReferenceArrayInputContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/controller/input/ReferenceArrayInputContextProvider.tsx:19:3)
    at ResourceContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/ResourceContextProvider.tsx:19:3)
    at ReferenceArrayInput (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx:23:3)
    at div
    at FormInput (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/form/FormInput.tsx:36:5)
    at span
    at FormGroupContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormGroupContextProvider.tsx:21:3)
    at FormTab (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/form/FormTab.tsx:25:3)
    at Route2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c: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:29:5)
    at FormView (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormWithRedirect.tsx:162:3)
    at ReactFinalForm (http://localhost:8080/node_modules/.vite/react-final-form.js?v=c1ff499c:1188:20)
    at FormContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormContextProvider.tsx:19:3)
    at FormWithRedirect (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/form/FormWithRedirect.tsx:30:3)
    at TabbedForm
    at div
    at Paper2 (http://localhost:8080/node_modules/.vite/chunk-GXBOJC66.js?v=c1ff499c:52:5)
    at WithStyles2 (http://localhost:8080/node_modules/.vite/chunk-5FSSVSNG.js?v=c1ff499c:362:31)
    at Card2 (http://localhost:8080/node_modules/.vite/chunk-EQ3ON66E.js?v=c1ff499c:36:5)
    at WithStyles2 (http://localhost:8080/node_modules/.vite/chunk-5FSSVSNG.js?v=c1ff499c: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:29:5)
    at RecordContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/controller/RecordContext.tsx:20:3)
    at SaveContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/controller/details/SaveContext.tsx:21:3)
    at EditContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/controller/details/EditContextProvider.tsx:21:3)
    at ResourceContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/ResourceContextProvider.tsx:19:3)
    at Edit (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/detail/Edit.tsx:22:3)
    at PostEdit (http://localhost:8080/src/posts/PostEdit.tsx?import&t=1620370131736:19:3)
    at WithPermissions (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/auth/WithPermissions.tsx:22:3)
    at Route2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:736:29)
    at Switch2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:880:29)
    at ResourceContextProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/ResourceContextProvider.tsx:19:3)
    at ResourceRoutes (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/Resource.tsx:54:3)
    at Resource (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/Resource.tsx:183:3)
    at Route2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:736:29)
    at Switch2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:880:29)
    at RoutesWithLayout (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/RoutesWithLayout.tsx:23: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:77:5)
    at WithStyles2 (http://localhost:8080/node_modules/.vite/chunk-5FSSVSNG.js?v=c1ff499c:362:31)
    at C2 (http://localhost:8080/node_modules/.vite/react-router-dom.js?v=c1ff499c:55:37)
    at ConnectFunction (http://localhost:8080/node_modules/.vite/chunk-N7LFNULK.js?v=c1ff499c:267:48)
    at ThemeProvider (http://localhost:8080/node_modules/.vite/chunk-QRZLL5S6.js?v=c1ff499c:185:24)
    at Layout (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-ui-materialui/src/layout/Layout.tsx:210:10)
    at default
    at Route2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:736:29)
    at Switch2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:880:29)
    at div
    at CoreAdminRouter (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/CoreAdminRouter.tsx:24:26)
    at Route2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:736:29)
    at Switch2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:880:29)
    at CoreAdminUI (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/CoreAdminUI.tsx:26:3)
    at AdminUI
    at Router2 (http://localhost:8080/node_modules/.vite/chunk-RCFGTEDQ.js?v=c1ff499c:464:30)
    at ConnectedRouter3 (http://localhost:8080/node_modules/.vite/connected-react-router.js?v=c1ff499c:229:7)
    at ConnectedRouterWithContext2 (http://localhost:8080/node_modules/.vite/connected-react-router.js?v=c1ff499c:297:25)
    at ConnectFunction (http://localhost:8080/node_modules/.vite/chunk-N7LFNULK.js?v=c1ff499c:267:48)
    at TranslationProvider (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/i18n/TranslationProvider.tsx:22:5)
    at Provider (http://localhost:8080/node_modules/.vite/chunk-N7LFNULK.js?v=c1ff499c:165:20)
    at CoreAdminContext (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/ra-core/src/core/CoreAdminContext.tsx:26:3)
    at AdminContext
    at Admin (http://localhost:8080/@fs/Users/andrico/Documents/Coding/react-admin/packages/react-admin/src/Admin.tsx:20:3)
@djhi
Copy link
Collaborator

djhi commented May 7, 2021

Confirmed, thanks for the report

@andrico1234
Copy link
Contributor Author

Thanks for the super quick response!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants