AutocompleteInput with Create, autoSelect not working

[Boncom99]

What you were expecting:

Using the AutocompleteInput component with onCreate function, autoSelect and autoHighlight.
I expect that when the user clicks on an option, that option will be selected and will stay selected when the component loses focus.

What happened instead:

When the user clicks the TAB key, the behaviour is the expected one, the highlighted choice gets selected and when the component loses focus, the choice is still selected. But when the user clicks with the mouse one option, this one disappears when the components lose focus. This only happens when autoSelect or autoHighlightare passed as props.

Steps to reproduce:

use the AutocompleteInput component with an onCreate function to allow the user to create new choices, and the autoSelect and autoHighlight.

Related code:

https://stackblitz.com/edit/github-g9msfs?file=src%2Fposts%2FPostCreate.tsx To reproduce the bug in this example provided, navigate to the create screen of a post, try to select a choice with your mouse from the "test" field and then click somewhere else to make the component lose focus.

alternatively, here is the code snipped to reproduce the error

import { FC, useState } from 'react';
import { AutocompleteInput, AutocompleteInputProps } from 'react-admin';

type Choice = {
  name: string;
  id: string | number;
};

export const AutoCompleteInputTest: FC<AutocompleteInputProps> = (props) => {
  const list: Choice[] = [
    { name: 'Choice 1', id: 'Choice 1' },
    { name: 'Choice 2', id: 'Choice 2' },
    { name: 'Choice 3', id: 'Choice 3' },
    { name: 'Choice 4', id: 'Choice 4' },
    { name: 'Choice 5', id: 'Choice 5' },
  ];
  const [choices, setChoices] = useState<Choice[]>(list);

  return (
    <AutocompleteInput
      autoSelect
      autoHighlight
      choices={choices}
      {...props}
      onCreate={(e) => {
        const newChoice: { name: string; id: string | number } = { name: e, id: e };
        setChoices((choices) => [...choices, newChoice]);
        return newChoice;
      }}
    />
  );
};

and use it inside a SimpleForm:

<SimpleForm>
<AutoCompleteInputTest source='sourceString'/>
</SimpleForm>

Other information:

Environment

• React-admin version: 4.16.16
• Last version that did not exhibit the issue (if applicable):
• React version: 18.2.0
• Browser: Chrome
• Stack trace (in case of a JS error):

[slax57]

Thank you for your report. I'm not sure I understand exactly what the issue is. To me, the fact that the selected option disappears from the list after a click is due to the filterSelectedOptions set to true by default in react-admin. If you disable it with filterSelectedOptions={false}, then the autoSelect and autoHighlight options seem to work fine. Am I missing something?

[Boncom99]

I updated the example provided adding filterSelectedOptions={false} but it has the same behaviour as before. The bug is not that the selected option disappears from the list, but that it disappears from the input. I'll upload a video so you can understand.

https://github.com/marmelab/react-admin/assets/45794572/888bd1cb-eef0-446e-941b-771ef8a0f551

In the video, the first time I try to select an item from the list with the mouse it disappears when the autocomplete component loses focus. The second time, I use the TAB to select the filtered option, which stays after losing focus.

[slax57]

Thanks for the additional information. I've narrowed it down to the autoSelect and onCreate props being used together, which cause this issue. Removing one or the other fixes the issue. It could be that one of the props react-admin sets on Autocomplete under the hood is not compatible with autoSelect. I'll qualify this issue as a bug, however rather low priority since it probably only affects a small amount of people. Feel free to open a PR if you'd like to work on fixing this issue.