React-admin: 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.

[hoangtuan438]

@fzaninotto
I see it too on demo site https://marmelab.com/react-admin-demo/#/commands/312
the issue isn't fixed. The popup suggestion is still show again after clicking. Here's my video: https://drive.google.com/file/d/1TGRL5r0R-2-18VoYuErq_7QVsB-nbjRx/view

[hoangtuan438]

@fzaninotto @Kmaschta

Is there anything new on the ticket? the issue was resolved?

Thanks

[Kmaschta]

Reopening this issue since it's not fixed as of the 2.8.2, we can reproduce the issue on the demo:
https://marmelab.com/react-admin-demo/#/commands

There is also a few reports

[FACOLOMBANI]

I forked the complete component because i needed lots of customisations in it, i solve this problem by adding focusInputOnSuggestionClick={false} prop to the Autosuggest component.

[Kmaschta]

PR are welcome :)

[FACOLOMBANI]

Since version 2.5.0 you can pass props directly from the AutocompleteInput to the Autosuggest : 'Add ability to pass custom props to react-autosuggest from > (#2410) (AskseL)'
So if you do the following it should work.
<AutocompleteInput source="district" optionText="name" focusInputOnSuggestionClick={false}/>`

[fzan]

Hello,
this issue is still open? I have the same behaviour, the AutocompleteInput reopens after selection.
:(

Confirmed is still in the demo,
https://marmelab.com/react-admin-demo/#/commands?filter=%7B%22status%22%3A%22ordered%22%2C%22customer_id%22%3A798%7D&order=DESC&page=1&perPage=25&sort=date

try to search for customer and select it

[Kmaschta]

Yep, it's still open.

Related to #3031

[amayatsky]

If I set focusInputOnSuggestionClick={false} on the ReferenceInput or AutocompleteInput selection just stops working.
I've made a sort of a fix for that with redux form normalize but I don't know if this is good by any means.

import React, { useRef } from "react";
import { ReferenceInput } from "react-admin";

export const normalize = Input => props => {
  const previousGoodValue = useRef(undefined);

  return (
    <Input
      {...props}
      focusInputOnSuggestionClick={false}
      normalize={(value, prevValue) => {
        if (
          value !== prevValue &&
          (previousGoodValue.current === undefined ||
            previousGoodValue.current === null)
        ) {
          previousGoodValue.current = value;
          return value;
        }
        if (value !== prevValue && prevValue === previousGoodValue.current) {
          previousGoodValue.current = value;
          return value;
        }
        return previousGoodValue.current;
      }}
    />
  );
};

export default normalize(ReferenceInput);

[fzaninotto]

Fixed by #3031