AutocompleteInput in ReferenceInput shows "no Options" instead of "Loading..."

[nkappler]

How to Reproduce: I have an AutocompleteInput Component and the option I am going to select is not in the pre-loaded options list, i.e. it is on the second page of the options result,

When I now start to type in the Input, none of the pre-loaded options match and the List Popup shows "no Options". After the default debounce timeout of a few hundred milliseconds, another request is sent to the backend, containing my search string. After the request, the correct option is displayed in the list.

I would expect that if not all options have been fetched yet, that the List would show "Loading..." immediately. The search request only takes a few milliseconds, so basically you never see "Loading..." in the list, just "no Options", which is not quite correct and might be confusing for users

• React-admin version: 4.1.2
• React version: 17.0.2

[antoinefricker]

Thanks for reporting!

Could you provide a behaviour reproduction sandbox?

• a CodeSandbox forked from simple example V4 or v3
• a link to a GitHub repo with the minimal codebase to reproduce the issue?

Many thanks for your help in this matter! 👍

[nkappler]

Does the codesanbox work for you? All I get is a black screen and some error messages in the console.

[antoinefricker]

Whoops! They seem to be in trouble... Here is a StackBlitz alternative. 👍

[fzaninotto]

Note that the AutocompleteInput is being reworked on (cf https://github.com/marmelab/react-admin/pull/8037). It's possible that the problem you describe is already fixed in the next branch. Could you test and report here if that's the case?

[nkappler]

Seems like codesandbox is working again... I've modified the example, to basically do the same thing I am doing in my codebase. The behaviour seems identical, however in the codesandbox, neither the "no Option", nor the "Loading" text are shown ever

https://codesandbox.io/s/ra-8043-40vxn9?file=/src/comments/PostReferenceInput.tsx

Navigate to the create comment page and search for "voluptatem" in the "post" field, this will result in only one option which needs to be fetched first:

I hope this helps

[nkappler]

Note that the AutocompleteInput is being reworked on (cf #8037). It's possible that the problem you describe is already fixed in the next branch. Could you test and report here if that's the case?

thanks for the heads-up. I've looked at the changes and you might be right, but I haven't tested it yet.

How would I go about testing it? Checking out the next branch and installing it as a local npm dependency? Or is the next version published anywhere?

[fzaninotto]

You can use codesandbox on the next branch:

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

[nkappler]

You can use codesandbox on the next branch:

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

I am not sure if this worked as expected. To modify the example, I have to fork it and when I do so, it re-installs all the dependencies and I think we are then back to the latest release version of react-admin.

The result list is still flickering in this example.

https://codesandbox.io/s/react-admin-8043-5z0o50

[fzaninotto]

Right, the forking "fixes" the dependencies to the previous version.

Your other option is to clone the react-admin repository, checkout the next branch, modify the simple example under examples/simple, then run it with make install run.

[slax57]

No news for some time, closing.