AutocompleteInput does not display choices

What you were expecting: I expected to enter a search string in the <AutocompleteInput/> and get autocomplete choices

What happened instead: The query returned a list of autocomplete options, but they were not displayed. Rather, they appear for a moment when I remove the focus from the field, then disappear.

Related code:

const TaskCreate = ({...props }) => {
  
    const controllerProps = useCreateController(props);

    return (
        <CreateView
            {...props}
            {...controllerProps}
        >
            <SimpleForm  >
            <ReferenceInput source="maintainableItem" reference="Object"  fullWidth >
                <AutocompleteInput />
            </ReferenceInput> 
            </SimpleForm>
        </CreateView>
    );
};

export default TaskCreate;

Other information: that’s what the react-admin does right after the page loads:

response:

then i enter the search text:

response:

but nothing is displayed on the screen until I click on an empty spot:

after a moment, the autocomplete options disappear and the first 25 entries are displayed

Environment

• React-admin version: 3.1.0

[wmwart]

Empirically, I have identified the problem. It was hard to guess.

If the optionText property (default “name”) does not contain a search string ({filter: { q: “d2he”}}), then the options are not displayed !!!

The {filter: { q: “d2he”}} does not have to return objects with the “name” field that contains the search string. For example, my backend allows me to search by id, but I do not want to return the id to the AutocompleteInput option, I want to display the name, and I can not do this.

1. Open codesandbox
2. Go PostCreate.js
3. fix:

...
                            <ReferenceInput
                                label="User"
                                source="user_id"
                                reference="users" 
                            >
                                <AutocompleteInput optionText="role"/>
                            </ReferenceInput>
...

1. Add Authors
2. Search “Lo” (Logan Schowalter)

[fzaninotto]

The AutocompleteInput does filtering on the client-side, and the ReferenceInput does filtering in the server side. Even though the AutocompleteInput does receive options, the ReferenceInput won’t display them if the optionText does not match the typed string.

That’s what matchSuggestion is for. It’s a function which check whether a choice matches a filter. It must return a boolean.

(filter: string, suggestion: any) => boolean

It’s documented in the properties of the AutocompleteInput: https://marmelab.com/react-admin/Inputs.html#autocompleteinput.