react-admin icon indicating copy to clipboard operation
react-admin copied to clipboard

AutocompleteInput resets input when useChoicesContext is called

Open wattry opened this issue 9 months ago • 2 comments

What you were expecting: useChoiceContext can be called in the scope of a ReferenceInput wrapped AutocompleteInput .

What happened instead: When trying to use the useChoicesContext inside a nested AutocompleteInput calling useChoicesContext causes the input to reset when the user enters values.

Related code:

On the stackblitz link navigate to the comments app and select a comment to edit. On the first Post input try search a new value. The input will be cleared every time you finish typing.

On the second posts input the isLoading value has be set to true. However, no loading indicator or text is displayed.

https://stackblitz.com/edit/github-guchrk?file=src%2Fcomments%2FCommentEdit.tsx

function AutocompleteLoading(props) {
  // This call prevents the user from typing. If commented out
  // you will be able to enter input.
  const choiceContext = useChoicesContext(props);

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

Other information:

Our users have complained that the autocomplete (in this use case) does not indicate that it is loading. When trying to use a isLoading flag we noticed that we could no longer enter input when we got the isLoading from the useChoicesContext. Separately even if you put the isLoading flag set to true the spinning wheel that is on the SelectInput is not shown.

Environment

    "react": "18.2.0",
    "react-admin": "4.16.18",
    "react-dom": "18.2.0",
  • React-admin version: 4.16.18
  • 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): N/A

wattry avatar May 23 '24 16:05 wattry