React-admin: ReferenceInput fails to load choices when multiple instances reference the same resource

[dlerman2]

I have an edit form that contains two ReferenceInputs that reference different fields on the same resource:

<SimpleForm>
  <ReferenceInput label="Favorite Car" source="favorite_car_id" reference="cars">
    <SelectInput optionText="name" />
  </ReferenceInput>
  <ReferenceInput label="Least Favorite Car" source="least_favorite_car_id" reference="cars">
    <SelectInput optionText="name" />
  </ReferenceInput>
</SimpleForm>

When either ReferenceInput is present by itself, it works fine -- but with both present, only one loads while the other is stuck in a loading animation.

This can be seen with the following standalone app (also at https://codesandbox.io/s/yvvko6lv01):

import React from 'react';
import { Admin, Resource, List, Datagrid, TextField, EditButton, Edit, SimpleForm, DisabledInput, TextInput, ReferenceInput, SelectInput } from 'react-admin';
import fakeDataProvider from 'ra-data-fakerest';

const dataProvider = fakeDataProvider({
    drivers: [
        { id: 0, name: 'Driver 1', favorite_car_id: 0, least_favorite_car_id: 1},
    ],
    cars: [
        { id: 0, name: 'Toyota' },
        { id: 1, name: 'Audi' },
        { id: 2, name: 'BMW' },
    ],
})

const DriversList = (props) => (
  <List {...props} >
    <Datagrid>
      <TextField source="name" />
      <EditButton />
    </Datagrid>
  </List>
);

const DriversEdit = (props) => (
  <Edit {...props} >
    <SimpleForm>
      <TextInput source="name" />
      <ReferenceInput label="Favorite Car" source="favorite_car_id" reference="cars">
        <SelectInput optionText="name" />
      </ReferenceInput>
      <ReferenceInput label="Least Favorite Car" source="least_favorite_car_id" reference="cars">
        <SelectInput optionText="name" />
      </ReferenceInput>
    </SimpleForm>
  </Edit>
);


const App = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name="drivers" list={DriversList} edit={DriversEdit} />
        <Resource name="cars" />
    </Admin>
);

export default App;

If you click the edit button on the first item in the list, you'll see that one of the inputs works fine while the other is broken.

It appears the problem is related to https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/actions/accumulateActions.js#L34. The two ReferenceInputs both call crudGetMatchingAccumulate, which get debounced to a single call to CRUD_GET_MATCHING with the resource as the accumulateKey. Then at https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/reducer/admin/references/possibleValues.js#L13, the result is added to the store keyed under relatedTo, which is defined as ${resource}@${source}, meaning it's only available to one of the two inputs (since the source is different for the other input).

Changing the accumulateKey to use relatedTo solves the problem since it prevents the two actions from getting combined, but at the cost of potentially loading the same options twice. If we wanted to keep the debounce, I suppose we'd need to store them under a different key in the store that would be shared -- but I'm not sure of all the implications of that.

[vhellow]

I have same problem and confirm this. Started in 2.3.0

[kakoli-biswas]

Having the same issue 😿

[dlerman2]

If you need a short term hack fix, this patch appears to do the trick:

--- a/node_modules/ra-core/esm/actions/accumulateActions.js
+++ b/node_modules/ra-core/esm/actions/accumulateActions.js
@@ -26,7 +26,7 @@ export var crudGetMatchingAccumulate = function crudGetMatchingAccumulate(refere
                 return true;
             },
             accumulateKey: JSON.stringify(_extends({
-                resource: reference
+                relatedTo
             }, action.payload))
         }
     };

[vhellow]

How you can apply this short term fix fix to your build?