Having an issue with the <ReferenceArrayInput> along with the <AutocompleteArrayInput> and optionValue

[labiang]

What you were expecting: For the AutocompleteArrayInput to work properly when the optionValue parameter is different from id

What happened instead: It is behaving oddly, if I select a value and then search for a string/character that the first value does not contain, it removes that from the field and marks it as null which then causes the form to submit with an error.

Steps to reproduce: Have a <SimpleForm> along with a <ReferenceArrayInput> which as children has an <AutocompleteArrayInput> with an optionValue parameter different from id.

e.g. (my case)

<ReferenceArrayInput
                                label="Channels"
                                source="config.channel_keys"
                                reference="channels"
                                sort={{ field: 'channel_key', order: 'ASC' }}
                                helperText="Channels to include in the calculations"
                                fullWidth
                                filterToQuery={(searchText) => ({ _q: searchText })}
                            >
                                <AutocompleteArrayInput optionValue="channel_key" optionText="channel_key" />
</ReferenceArrayInput>

Other information: Example of the JS error when that behavior happens:

Environment

• React-admin version: 3.19.11
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.2
• Browser: Brave (chromium engine)
• Stack trace (in case of a JS error):

[geobde]

@WiXSL is this fixed in v4?

[fzaninotto]

@geobde The bug report is for v3. There is no reason to believe it doesn't work in v4. If you found a bug, please provide a reproduction.

[tauqeer-trailfive]

i also getting the same bug @labiang did solve it?

[tauqeer-trailfive]

@fzaninotto

[fzaninotto]

@tauqeer-trailfive if you want us to take a look at it, p lease provide a reproduction.

[tauqeer-trailfive]

@fzaninotto you can check it your own

 <ArrayInput
            source="musicalInstruments"
            label="Musical Instruments (Search by name)"
          >
            <SimpleFormIterator
              disableReordering={true}
              fullWidth
              addButton={
                <IconButton title="Add Instrument">
                  <AddIcon color="success" />
                </IconButton>
              }
              removeButton={
                <IconButton title="Remove Instrument">
                  <MinusIcon color="secondary" />
                </IconButton>
              }
              disableClear
            >
              <ReferenceInput
                label="musicalInstruments"
                source="id"
                reference="musicalInstruments"
              >
                <AutocompleteInput
                  optionText={(choice) =>
                    `${choice.name}  /  ${choice.rank}  /  (${choice.id})`
                  }
                  optionValue="id"
                  label="Name / Rank / id"
                  fullWidth
                />
              </ReferenceInput>
            </SimpleFormIterator>
          </ArrayInput>

optionValue should accept other field name rather id of chamge the field name to others then it take null value to dataProvider.

Why it takes id only as a value it should be dynamic

[tauqeer-trailfive]

i just clone the repo and use demo

[fzaninotto]

@tauqeer-trailfive This isn't clear enough, please provide a link to a StackBlitz based on https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple that reproduces your problem.

[fzaninotto]

With the release of react-admin v5, react-admin v3 has reached its end of life. We won't fix bugs or make any new release on the 3.x branch. We recommend that you switch to a more recent version of react-admin.

So I'm closing this issue as we won't fix it.