marmelab / react-admin

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
http://marmelab.com/react-admin
MIT License
24.98k stars 5.25k forks source link

New choices of AutocompleteInput not updating when chaging its value #10176

Open ronfogel opened 2 months ago

ronfogel commented 2 months ago

What you were expecting: When using custom choices, any changes to those choices should be reflected in the options.

What happened instead: It seems that the initial options are being displayed and filtered based on the input text.

Steps to reproduce: I followed the code from the AutocompleteInput documentation (for selecting a foreign key), which updates the choices after fetching new data.

Related code: https://marmelab.com/react-admin/AutocompleteInput.html#selecting-a-foreign-key

import React, { useState } from 'react';
import { AutocompleteInput, useGetList } from 'react-admin';

function LocodeInput(props: any) {
  const [filter, setFilter] = useState({
    q: '',
  });
  const { data, isPending } = useGetList('areas', { filter });

  return (
    <AutocompleteInput
      source="locode"
      label="Locode"
      choices={data}
      isPending={isPending}
      optionText="id"
      optionValue="id"
      onInputChange={(e, value) => {
        setFilter({
          q: value,
        });
      }}
    />
  );
}

export default LocodeInput;

Environment

djhi commented 2 months ago

Thanks for reporting this. Please provide a sample application showing the issue by forking the following Stackblitz (https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple).