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

[TomJannes]

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)

[djhi]

If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:

• CodeSandbox (https://codesandbox.io/s/vvw21793w0)
• A sample application via GitHub

[TomJannes]

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)

[TomJannes]

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

[veeveMariaLazar]

@TomJannes I have that by default and unfortunately still have the error

Browser: firefox
material-ui: 0.20.2
material-ui-chip-input: 1.0.0-beta.8
react-admin: 2.4.1

[furaiev]

Here is a workaround

const ModifiedAutocompleteArrayInput = props => {
    if(props.input.value === '') {
        props.input.value = [];
    } else if(props.input.value) {
        props.input.value = [ ...new Set(props.input.value.map(el => el.id || el)) ];
    }

    return <AutocompleteArrayInput {...props}/>;
};

new Set is preventing repeated value, but doesn't change it in the parent's state, so it won't be rendered but will be sent to dataProvider.
To avoid sending repeated ids you should also check an array during ApiModel creation

const prepareTagApiModel = el => {
    let model = {};
    model.tags = [ ...new Set(el.ids)];
    return model;
};

[tiagoschenkel]

I had the same problem and found a possible solution.

The problem happens because, sometimes, the input component has an empty string as a default value, but the AutocompleteArrayInputChip component only accepts an Array value.

Enforcing state.inputValue to be an Array solves the issue.

Here is my implementation, let me know if is fine for a merge request:
tiagoschenkel@aeb8acd