AutocompleteArrayInput chip not displaying as expected

[Wraiyth]

What you were expecting:
When editing an item that uses AutocompleteArrayInput wrapped inside ReferenceArrayInput, the chip will display correctly.

What happened instead:
The chip works when selecting from the list, however when loading the page the chip is blank

Steps to reproduce:
Unable to provide a sample application

Related code:
Use of ReferenceArrayInput and AutocompleteArrayInput as follows:

<ReferenceArrayInput label="Assets" reference="webemt/assets" source="assetIDs" validate={[required()]} allowDuplicates="true">
      <AutocompleteArrayInput />
</ReferenceArrayInput>

When editing an item, the API calls are made as expected:

{"assetIDs":["25"],"id":1,"microtransactionId":1,"name":"Key","description":"Opens a locked Dinosaur or Human crate","originalPrice":199,"currentPrice":199,"currency":null,"categories":"Featured","isActive":false}

A subsequent API call is made to assets?id=25, which returns (truncated for brevity):

[{"id":25,"background_color":"000000","icon_url":null,"name":"Classic Key"}]

However, what I see in the UI is as follows:

Noting that the autocomplete list works:

And if I select something from the list, the chip is displayed correctly:

Other information:

Environment

• React-admin version: 3.10.3
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.1
• Browser: Chrome
• Stack trace (in case of a JS error):

[djhi]

Hi and thanks for the report. I can't reproduce this issue on the simple example though. So unless you can provide a codesandbox showing the issue, I'll assume the problem is in your code and will close the issue

[Wraiyth]

I'll see if I can put an example together to repro this issue

[otroboe]

I don't know if it's related, but I have a different issue on my own, with the same duo ReferenceArrayInput / AutocompleteArrayInput also, which I don't have when I use ReferenceArrayInput / SelectArrayInput.

When I select an option, it's throwing me an error.

Uncaught TypeError: newIds.forEach is not a function
    at Object.onSelect (useReferenceArrayInputController.js:125)
    at Downshift.<anonymous> (downshift.esm.js:596)

I keep investigating on my own, and I'll probably create another issue.
I have the issue since 3.12.1 (as far as I tried), maybe it's from another dependency like typescript.

Edit
It was the same kind of #5968, and the last version 3.13.1 fixed it.
Maybe you should try updating your version.

[fzaninotto]

No news for some time, closing.

[Wraiyth]

FWIW, I ended up tracking this down to being me stupidly returning the id array as an array of strings, not an array of integers.

{"assetIDs":["25"],

should be
{"assetIDs":[25],

So even though the request gets made to get the data, for some odd reason its not populated in the chip text. Assuming that has something to do with the autocomplete matcher code.