Infinite rerendering in ReferenceInput + AutocompleteInput

[fzaninotto]

What you were expecting:

Emptying AutocompleteInput shows list of suggestions

What happened instead:

Emptying AutocompleteInput provokes an infinite rerender

Steps to reproduce:

1. Open the v4 CodeSandbox
2. Got to a Comment edit view
3. Click on the cross to empty the Post autocomplete
4. The autocomplete empties then re-fills, forever.

Related code:

 <ReferenceInput
    source="post_id"
    reference="posts"
    perPage={15}
    sort={{ field: 'title', order: 'ASC' }}
>
    <AutocompleteInput
        create={<CreatePost />}
        matchSuggestion={(
            filterValue,
            suggestion
        ) => {
            const title = `${suggestion.title} - ${suggestion.id}`;
            return title.includes(filterValue);
        }}
        optionText={<OptionRenderer />}
        inputText={inputText}
        fullWidth
    />
</ReferenceInput>

Other information:

https://user-images.githubusercontent.com/99944/161535799-c1502f10-21ff-43eb-86c2-644c28408f9f.mov

Environment

• React-admin version: v4-rc.0
• Last version that did not exhibit the issue (if applicable): v3
• React version: 17
• Browser: Chrome
• Stack trace (in case of a JS error): no error

[WiXSL]

This happens because of the value being set and then the filter being set ( debounced or not )

https://github.com/marmelab/react-admin/blob/6c76cca9494acee696463005e86fbfbcb83bb113/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx#L352

You can reproduce this as well if you erase the input in any other way