question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AutocompleteArrayInput in ReferenceArrayInput does not show selection popup and throws chipinput error

See original GitHub issue

What you were expecting: To see the loaded data in the autocomplete popup

What happened instead: Following error: Failed prop type: Invalid prop value of type string supplied to ChipInput, expected array.

Related code:

<ReferenceArrayInput label="Select" source="companyIds" reference="companies" filterToQuery={searchText => ({company_name: searchText})}>
    <AutocompleteArrayInput optionText="name"/>
</ReferenceArrayInput>

Environment

  • React-admin version: 2.3.1
  • Last version that did not exhibit the issue (if applicable):
  • React version: 16.5.2
  • Browser: chrome
  • Stack trace (in case of a JS error):
Failed prop type: Invalid prop `value` of type `string` supplied to `ChipInput`, expected `array`. in ChipInput (created by WithStyles(ChipInput)) in WithStyles(ChipInput) (created by AutocompleteArrayInputChip) in AutocompleteArrayInputChip (created by WithStyles(AutocompleteArrayInputChip)) in WithStyles(AutocompleteArrayInputChip) (created by Autowhatever) in div (created by Autowhatever) in Autowhatever (created by Autosuggest) in Autosuggest (created by AutocompleteArrayInput) in AutocompleteArrayInput (created by WithStyles(AutocompleteArrayInput)) in WithStyles(AutocompleteArrayInput) (created by translate(WithStyles(AutocompleteArrayInput))) in translate(WithStyles(AutocompleteArrayInput)) (created by FormFieldView) in FormFieldView (created by DefaultValue) in DefaultValue (created by Connect(DefaultValue)) in Connect(DefaultValue) (created by WithFormField) in WithFormField (at BouwstappenList.jsx:136) in ReferenceArrayInputView (created by ReferenceArrayInputController) in ReferenceArrayInputController (created by Connect(ReferenceArrayInputController)) in Connect(ReferenceArrayInputController) (created by translate(Connect(ReferenceArrayInputController))) in translate(Connect(ReferenceArrayInputController)) (created by ReferenceArrayInput) in ReferenceArrayInput (created by translate(ReferenceArrayInput)) in translate(ReferenceArrayInput) (created by ConnectedField) in ConnectedField (created by Connect(ConnectedField)) in Connect(ConnectedField) (created by Field) in Field (created by FormFieldView) in FormFieldView (created by DefaultValue) in DefaultValue (created by Connect(DefaultValue)) in Connect(DefaultValue) (created by WithFormField) in WithFormField (at BouwstappenList.jsx:135) in div (created by FormInput) in FormInput (created by WithStyles(FormInput)) in WithStyles(FormInput) (created by FormTab) in span (created by FormTab) in FormTab (created by translate(FormTab)) in translate(FormTab) (at BouwstappenList.jsx:134) in Route (created by TabbedForm) in div (created by CardContent) in CardContent (created by WithStyles(CardContent)) in WithStyles(CardContent) (created by CardContentInner) in CardContentInner (created by WithStyles(CardContentInner)) in WithStyles(CardContentInner) (created by TabbedForm) in form (created by TabbedForm) in TabbedForm (created by WithStyles(TabbedForm)) in WithStyles(TabbedForm) (created by Form(WithStyles(TabbedForm))) in Form(WithStyles(TabbedForm)) (created by Connect(Form(WithStyles(TabbedForm)))) in Connect(Form(WithStyles(TabbedForm))) (created by ReduxForm) in ReduxForm (created by translate(ReduxForm)) in translate(ReduxForm) (created by Connect(translate(ReduxForm))) in Connect(translate(ReduxForm)) (created by Route) in Route (created by withRouter(Connect(translate(ReduxForm)))) in withRouter(Connect(translate(ReduxForm))) (at BouwstappenList.jsx:111) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by Card) in Card (created by WithStyles(Card)) in WithStyles(Card) (created by CreateView) in div (created by CreateView) in CreateView (created by CreateController) in CreateController (created by translate(CreateController)) in translate(CreateController) (created by Connect(translate(CreateController))) in Connect(translate(CreateController)) (created by Create) in Create (at BouwstappenList.jsx:110) in Unknown (created by WithStyles(Component)) in WithStyles(Component) (created by WithPermissions) in WithPermissions (created by Connect(WithPermissions)) in Connect(WithPermissions) (created by getContext(Connect(WithPermissions))) in getContext(Connect(WithPermissions)) (created by Route) in Route (created by Resource) in Switch (created by Resource) in Resource (created by Connect(Resource)) in Connect(Resource) (at App.js:23) in Route (created by RoutesWithLayout) in Switch (created by RoutesWithLayout) in RoutesWithLayout (created by Route) in div (created by Layout) in main (created by Layout) in div (created by Layout) in div (created by Layout) in Layout (created by WithStyles(Layout)) in WithStyles(Layout) (created by Route) in Route (created by withRouter(WithStyles(Layout))) in withRouter(WithStyles(Layout)) (created by Connect(withRouter(WithStyles(Layout)))) in Connect(withRouter(WithStyles(Layout))) (created by LayoutWithTheme) in MuiThemeProvider (created by LayoutWithTheme) in LayoutWithTheme (created by Route) in Route (created by CoreAdminRouter) in Switch (created by CoreAdminRouter) in div (created by CoreAdminRouter) in CoreAdminRouter (created by Connect(CoreAdminRouter)) in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter))) in getContext(Connect(CoreAdminRouter)) (created by Route) in Route (created by CoreAdmin) in Switch (created by CoreAdmin) in Router (created by ConnectedRouter) in ConnectedRouter (created by CoreAdmin) in TranslationProvider (created by withContext(TranslationProvider)) in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider))) in Connect(withContext(TranslationProvider)) (created by CoreAdmin) in Provider (created by CoreAdmin) in CoreAdmin (created by withContext(CoreAdmin)) in withContext(CoreAdmin) (at App.js:15) in App (at src/index.js:7)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:5
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
TomJannescommented, Oct 16, 2018

If I change <AutocompleteArrayInput optionValue="id" optionText="name" /> into <AutocompleteArrayInput optionValue="id" optionText="name" allowEmpty /> the error is no longer there

1reaction
TomJannescommented, Feb 21, 2019

Created a code sandbox: https://codesandbox.io/s/wk654wq59k

Added the autocompletearrayinput in the post create on line 176.

the popup appears but the error is still there:

Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `ChipInput`, expected `array`. in ChipInput (created by WithStyles(ChipInput)) in WithStyles(ChipInput) (created by AutocompleteArrayInputChip) in AutocompleteArrayInputChip (created by WithStyles(AutocompleteArrayInputChip)) in WithStyles(AutocompleteArrayInputChip) (created by Autowhatever) in div (created by Autowhatever) in Autowhatever (created by Autosuggest) in Autosuggest (created by AutocompleteArrayInput) in AutocompleteArrayInput (created by WithStyles(AutocompleteArrayInput)) in WithStyles(AutocompleteArrayInput) (created by translate(WithStyles(AutocompleteArrayInput))) in translate(WithStyles(AutocompleteArrayInput)) (created by FormFieldView) in FormFieldView (created by DefaultValue) in DefaultValue (created by Connect(DefaultValue)) in Connect(DefaultValue) (created by WithFormField) in WithFormField (created by PostCreate) in ReferenceArrayInputView (created by ReferenceArrayInputController) in ReferenceArrayInputController (created by Connect(ReferenceArrayInputController)) in Connect(ReferenceArrayInputController) (created by translate(Connect(ReferenceArrayInputController))) in translate(Connect(ReferenceArrayInputController)) (created by ReferenceArrayInput) in ReferenceArrayInput (created by translate(ReferenceArrayInput)) in translate(ReferenceArrayInput) (created by ConnectedField) in ConnectedField (created by Connect(ConnectedField)) in Connect(ConnectedField) (created by Field) in Field (created by FormFieldView) in FormFieldView (created by DefaultValue) in DefaultValue (created by Connect(DefaultValue)) in Connect(DefaultValue) (created by WithFormField) in WithFormField (created by PostCreate) in div (created by FormInput) in FormInput (created by WithStyles(FormInput)) in WithStyles(FormInput) (created by SimpleForm) in div (created by CardContent) in CardContent (created by WithStyles(CardContent)) in WithStyles(CardContent) (created by CardContentInner) in CardContentInner (created by WithStyles(CardContentInner)) in WithStyles(CardContentInner) (created by SimpleForm) in form (created by SimpleForm) in SimpleForm (created by Form(SimpleForm)) in Form(SimpleForm) (created by Connect(Form(SimpleForm))) in Connect(Form(SimpleForm)) (created by ReduxForm) in ReduxForm (created by translate(ReduxForm)) in translate(ReduxForm) (created by Connect(translate(ReduxForm))) in Connect(translate(ReduxForm)) (created by PostCreate) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by Card) in Card (created by WithStyles(Card)) in WithStyles(Card) (created by CreateView) in div (created by CreateView) in CreateView (created by CreateController) in CreateController (created by translate(CreateController)) in translate(CreateController) (created by Connect(translate(CreateController))) in Connect(translate(CreateController)) (created by Create) in Create (created by PostCreate) in PostCreate (created by WithPermissions) in WithPermissions (created by Connect(WithPermissions)) in Connect(WithPermissions) (created by getContext(Connect(WithPermissions))) in getContext(Connect(WithPermissions)) (created by Route) in Route (created by Resource) in Switch (created by Resource) in Resource (created by Connect(Resource)) in Connect(Resource) in Route (created by RoutesWithLayout) in Switch (created by RoutesWithLayout) in RoutesWithLayout (created by Route) in div (created by Layout) in main (created by Layout) in div (created by Layout) in div (created by Layout) in Layout (created by WithStyles(Layout)) in WithStyles(Layout) (created by Route) in Route (created by withRouter(WithStyles(Layout))) in withRouter(WithStyles(Layout)) (created by Connect(withRouter(WithStyles(Layout)))) in Connect(withRouter(WithStyles(Layout))) (created by LayoutWithTheme) in MuiThemeProvider (created by LayoutWithTheme) in LayoutWithTheme (created by Route) in Route (created by CoreAdminRouter) in Switch (created by CoreAdminRouter) in div (created by CoreAdminRouter) in CoreAdminRouter (created by Connect(CoreAdminRouter)) in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter))) in getContext(Connect(CoreAdminRouter)) (created by Route) in Route (created by CoreAdmin) in Switch (created by CoreAdmin) in Router (created by ConnectedRouter) in ConnectedRouter (created by CoreAdmin) in TranslationProvider (created by withContext(TranslationProvider)) in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider))) in Connect(withContext(TranslationProvider)) (created by CoreAdmin) in Provider (created by CoreAdmin) in CoreAdmin (created by withContext(CoreAdmin)) in withContext(CoreAdmin)
Read more comments on GitHub >

github_iconTop Results From Across the Web

AutocompleteArrayInput displays blank entries - Stack Overflow
The first two examples display fine, because both "Red" and "Green" are in the known list. However, the problem is that react-admin does...
Read more >
CHANGELOG.md · 邹昊坤/marmelab-react-admin - Gitee.com
Fix <FilterListItem> doesn't appear selected when more than one filter is applied (5644) (fzaninotto); Fix usePermissions always triggers a re-render even ...
Read more >
The AutocompleteArrayInput Component - React-admin
<AutocompleteArrayInput>. To let users choose multiple values in a list using a dropdown with autocompletion, use <AutocompleteArrayInput> .
Read more >
CHANGELOG.md ... - GitCode
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design ......
Read more >
ra-core: Versions - Openbase
Fix <SimpleForm> does not sanitize react-hook-form props (#8186) (WiXSL) ... Fix <ReferenceArrayInput> with <AutocompleteArrayInput> throws error if the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found