The AutoCompleteInput Form always reloaded when type some string

[oktarama96]

What you were expecting:
The AutoCompleteInput doesnt reloaded the input form when type some string

What happened instead:
The AutoCompleteInput reloaded the input form when type some string and make us to repeat type

Related code:

<Filter {...props}>
      <ReferenceInput label="Consultant" source="consultant_id" reference="consultants" sort={{ field: 'full_name', order: 'ASC' }}>
        <AutocompleteInput optionText="full_name"
          shouldRenderSuggestions={(val: string) => {
            return val.trim().length > 2;
          }} />
      </ReferenceInput>
    </Filter>

Other information:
This the video https://drive.google.com/file/d/1me268LGar3wg17F8Xh0b-3eV5R7aIOfY/view?usp=sharing
Environment

• React-admin version: 3.11.2
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.1
• Browser: Chrome Version 90.0.4430.85 (Official Build) (64-bit)
• Stack trace (in case of a JS error):

[fzaninotto]

I can't reproduce the problem on the simple example. Please fork the Codesandbox and modify the code to reproduce your bug, e.g. in the Comment List, which uses a ReferenceInput for its filters.

https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple

[kuuneko]

I have this same issue as described by the OP. It occurs as soon as I upgrade from 3.9.4 to anything.

[fzaninotto]

@kuuneko then please provide a way to reproduce it.

[ngnclht1102]

Same here, I also encountered the same problem.
It is successfully filtered, but after that, it is reloading.

It only happened on edit mode, on create mode, it works perfectly

error.mov

[ngnclht1102]

I can't reproduce the problem on the simple example. Please fork the Codesandbox and modify the code to reproduce your bug, e.g. in the Comment List, which uses a ReferenceInput for its filters.

https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple

for me, it happened only on edit mode. Seem something is re-rendered and it load the default value again

My dependencies:

    "@testing-library/jest-dom": "4.2.4",
    "@testing-library/react": "9.3.2",
    "@testing-library/user-event": "7.1.2",
    "fetch-to-curl": "0.4.0",
    "lodash.set": "4.3.2",
    "prop-types": "15.7.2",
    "ra-data-json-server": "3.15.0",
    "ra-data-simple-rest": "3.13.4",
    "ra-dependent-input": "^2.0.0-beta2",
    "ra-input-rich-text": "3.14.0",
    "ra-language-vietnamese": "3.0.1",
    "ra-ui-materialui": "3.15.0",
    "react": "^16.13.1",
    "react-admin": "3.15.0",
    "react-admin-vietnamese": "https://github.com/ngnclht1102/react-admin-vietnamese.git",
    "react-d3-tree": "2.0.1",
    "react-dom": "16.13.1",
    "react-scripts": "4.0.3"```

[ngnclht1102]

My repo is here: https://github.com/ngnclht1102/ancestor-tree-admin-dashboard/blob/master/src/components/people/form.js

[WiXSL]

My repo is here: https://github.com/ngnclht1102/ancestor-tree-admin-dashboard/blob/master/src/components/people/form.js

It's not easy to run your project, It throws all sort of errors.
Could you provide a simple codesandbox reproducing the problem?

[WiXSL]

@oktarama96, @ngnclht1102, could you try version 3.19.8 and see if you still have this problem?

[macrozone]

i had a similar problem, reason was that i used an anonymous function for optionText, which was a new object on each rerender, which resulted in the autocomplete input to call handleFilterChange("") and thus empty the input.

Maybe you have a similar problem with shouldRenderSuggestions ? so use useCallback or a static variable for that function

[cdwhitt]

I am having a similar problem for the edit page, but for me, the input sometimes clears when I select one of the rendered options. Running on 3.19.10

[jules-deguglielmi]

I am having a similar problem for the edit page, but for me, the input sometimes clears when I select one of the rendered options. Running on 3.19.10

Same problem on 4.0.2, everything is fine when i type some text matching options that are not selected yet, but if my text match an option already selected it's erased

[slax57]

Again, we fail to reproduce this issue on our examples, so we can't work on it.
Can you try to reproduce in this codesandbox, and/or try to add some of your code in it in order to reproduce the issue?
https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple
Thanks

[fzaninotto]

No news for some time, closing.