AutocompleteInput suggestions list is displayed after request even when user pick an option or leave the input

[kamil-borecki]

What you were expecting:
After autocompleteInput blur or after user pick an option the list of suggestions should not appear.
It should be displayed only when user change textinput manually
What happened instead:
After autocompleteInput blur or after user pick an option the list of suggestions appears.

it looks like after new option is picked there is send a new request to the backend for a list of suggestions and after this request suggestions list is displayed to the user no meter if user exit the input or just picked one of the suggestions

Steps to reproduce:
I am using api-platform/admin with HydraClient

Related code:

const getNameText = object => {
  return object.name || '';
};


<ReferenceInput className={classes.inputBlock} {...rest} label="Account" source="account" reference="accounts"
                              filterToQuery={searchText => ({ name: searchText })} validate={required()}>
                <AutocompleteInput optionText={getNameText} inputValueMatcher={() => null}/>
              </ReferenceInput>

Environment

• React-admin version: 2.3.0
• Last version that did not exhibit the issue (if applicable):
• React version: 16.5.0
• Browser: Google Chrome 69.0.3497.100
• Stack trace (in case of a JS error): no error

[fzaninotto]

I can't reproduce the issue on the simple example. Can you provide a CodeSandbox showing the issue?

[Oupsla]

Maybe duplicated of : #2428

[fzaninotto]

Bump, can you please provide a way to reproduce the issue?

[Oupsla]

Here : https://codesandbox.io/s/lrro0q4wnm

Go to the custom page, then write something (like omnis) in the autocomplete input and then select something (and the selection container will open again)

[ArnaudD]

Looks like a duplicated of #2428 indeed.

Setting focusInputOnSuggestionClick={false} on the AutoSuggest component like @FACOLOMBANI suggested here fixed the issue in my case (after creating a custom AutocompleteInput component).

[ArnaudD]

quick-and-dirty fix (instead of creating a custom AutocompleteInput component) :

import Autosuggest from 'react-autosuggest';
Autosuggest.defaultProps.focusInputOnSuggestionClick = false;

[fancyaction]

@ArnaudD

This works on my form fields but not within my arrayInput fields. On edit, it breaks the onChange completely. Seems a viable temp fix if you aren't using arrayInput, however.

[fzaninotto]

Closed as duplicate of #2428, which I just reopened.