AutocompleteInput pop-up after choice is selected

[Ken-Lim]

What you were expecting:
After choice is selected, AutocompleteInput filled the textInput with selected choice

What happened instead:
After choice is selected, AutocompleteInput filled the textInput with selected choice then pop-up all the choices again

Steps to reproduce:

1. Goto demo site, to edit an order (e.g. https://marmelab.com/react-admin-demo/#/commands/280)
2. Enter a customer name in the Customer field
3. Select the choice with your mouse
4. All choices were pop-up again

Please see the attached GIF for the issue

[fzaninotto]

Confirmed. Weird bug.

[Oupsla]

Hello @Ken-Lim and @fzaninotto,
I'm still experiencing this issue with an Autocomplete inside a Reference Input, with react-admin 2.4.0 and react-autosuggest ^9.4.2 in package-lock.json.

Little note : The ReferenceInput is outside a Create/Edit page so using a SimpleForm and overriding the form prop

 render() {
    const { deviceId } = this.state;

    return (
        <SimpleForm form="replace-device-form" resource="Device" save={this.handleSubmit}>
            <ReferenceInput
                label="Test issue 2428"
                source="deviceId"
                reference="Device"    
                onChange={(event, deviceId) => console.log(`New deviceId ${deviceId}`)}
            >
                <AutocompleteInput optionText="identification" />
            </ReferenceInput>
        </SimpleForm>
    )
}

Any idea ? Upgrading to 9.4.2 has fixed the issue for you ?

[Ken-Lim]

Hello @Ken-Lim and @fzaninotto,
I'm still experiencing this issue with an Autocomplete inside a Reference Input, with react-admin 2.4.0 and react-autosuggest ^9.4.2 in package-lock.json.

Little note : The ReferenceInput is outside a Create/Edit page so using a SimpleForm and overriding the form prop

 render() {
    const { deviceId } = this.state;

    return (
        <SimpleForm form="replace-device-form" resource="Device" save={this.handleSubmit}>
            <ReferenceInput
                label="Test issue 2428"
                source="deviceId"
                reference="Device"    
                onChange={(event, deviceId) => console.log(`New deviceId ${deviceId}`)}
            >
                <AutocompleteInput optionText="identification" />
            </ReferenceInput>
        </SimpleForm>
    )
}

Any idea ? Upgrading to 9.4.2 has fixed the issue for you ?

I upgraded to react-admin 2.4.0, which uses the react-autosuggest 9.4.2.
Unfortunately, the issue is not resolve for me.

[FACOLOMBANI]

i fixed this issue by adding focusInputOnSuggestionClick={false} props to the AutoSuggest component.

[fzaninotto]

reopening as the issue seems not fixed

[Oupsla]

Forwarding message for example of the issue

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)

[petmongrels]

This issue is not fixed.
I can see my dependency to be "react-autosuggest": "^9.4.2", but the issue persists.

Steps to reproduce:
Please find the GIF that explains the issue here: http://g.recordit.co/ng8QhldeJB.gif

Related code:
My code is like the following:

<ReferenceInput label="Districts" source="districtId" reference="district" validate={[required("Mandatory")]} perPage={20}>
        <AutocompleteInput source="district" optionText="name"/>}
</ReferenceInput>

Other information:

Environment

• React-admin version: "react": "^16.6.3",
  "react-admin": "^2.5.1",
  "react-dom": "^16.6.3"
• Browser: Chrome
• Stack trace (in case of a JS error): No Error On Console.