AutocompleteArrayInput crash when selecting value

[ronfogel]

What you were expecting:
When selecting a value it should be added as chip to the input.

What happened instead:
Exception

Steps to reproduce:

1. Implement autocomplete like it says in docs
2. Click on a suggestion

Related code:
https://codesandbox.io/s/7j5mryn876
Go to comments > click on edit on one of the comments > first input is AutocompleteArrayInput - select a suggestion.

Environment

• React-admin version: >= 2.4.0

• Last version that did not exhibit the issue (if applicable): 2.3.4

• React version: 16.3.1

• Browser: Chrome 71.0.3578.75 (Official Build) beta (64-bit)

• Stack trace (in case of a JS error): ```
  TypeError: chips.map is not a function

  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)
  in translate(WithStyles(AutocompleteArrayInput)) (created by ConnectedField)
  in ConnectedField (created by Connect(ConnectedField))
  in Connect(ConnectedField) (created by Field)
  in Field
  in Unknown (created by DefaultValue)
  in DefaultValue (created by Connect(DefaultValue))
  in Connect(DefaultValue) (created by WithFormField)
  in WithFormField (created by EditController)
  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
  in translate(ReduxForm) (created by Connect(translate(ReduxForm)))
  in Connect(translate(ReduxForm)) (created by EditController)
  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 EditController)
  in div (created by EditController)
  in EditController
  in translate(EditController) (created by Connect(translate(EditController)))
  in Connect(translate(EditController))
  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)
  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 TranslationProviderView (created by Connect(TranslationProviderView))
  in Connect(TranslationProviderView) (created by CoreAdmin)
  in Provider (created by CoreAdmin)
  in CoreAdmin (created by withContext(CoreAdmin))
  in withContext(CoreAdmin)

[fzaninotto]

can you try to upgrade to react-admin >= 2.4.4? I think it's a duplicate of #2578

[fzaninotto]

Sorry, I saw that your CodeSandbox uses react-admin 2.5

[ronfogel]

Sorry, I saw that your CodeSandbox uses react-admin 2.5

I checked all the versions from 2.5 to 2.3.4 (which was the first downgraded version that worked for me), so its not working for any version above (and including) 2.4.0

[fzaninotto]

I can't reproduce it on master... Ill try to understand what's different in your CodeSandbox.

[fzaninotto]

if it appeared on 2.4, it's probably related to #2436

[fzaninotto]

OK, found the bug, it's an artefact of Js transpilation. We don't see it when developing because we don't use the transpiled version.

[evmdev]

The error was not completely fixed. To fix this, I add this check for input.value to the AutocompleteArrayInput.js file.
`

componentWillMount() {
    this.setState({
        inputValue: Array.isArray(this.props.input.value) ? this.props.input.value : this.props.input.value ? [this.props.input.value] : [],
        suggestions: this.props.choices,
    });
}

componentWillReceiveProps(nextProps) {
    const { choices, input, inputValueMatcher } = nextProps;
    if (!isEqual(input.value, this.state.inputValue)) {
        this.setState({
            inputValue: Array.isArray(input.value) ? input.value : input.value ? [input.value] : [],
            dirty: false,
            suggestions: this.props.choices,
        });
        // Ensure to reset the filter
        this.updateFilter('');
    } else if (!isEqual(choices, this.props.choices)) {
        this.setState(({ searchText }) => ({
            suggestions: choices.filter(suggestion =>
                inputValueMatcher(
                    searchText,
                    suggestion,
                    this.getSuggestionText
                )
            ),
        }));
    }
}

`

[djhi]

Thanks for the feedback! Would you mind making a PR to fix it?

[nacky012001]

Hello @djhi, I am still experiencing this bug after updating to React-Admin 2.5.1.