`AutoCompleteList` doesn't work properly when combining mapped items from an array with static children

The AutoCompleteList component doesn’t behave as expected when its children are a combination of both mapped items from an array and static components. In my app, I update an array of paper objects with the useState hook with api calls that listen to onChange events on the AutoCompleteInput. The array starts empty, and is then populated as the user types. As of now, this works. But, if I add other components inside the AutoCompleteList after the array is mapped, the suggestions stop working for the papers array (although they work for the values of the static components). This bug happens even if I map through an array that starts populated, such as the countries array from the examples. For example (I omitted the AutoComplete wrapper component for clarity):

<AutoCompleteList>
    {/* These items will not appear in the suggestions... */}
    {papers.map((paper) => (
       <AutoCompleteItem
            key={paper.pmid}
            value={paper.title}
      >
      </AutoCompleteItem>
    ))}
    {/* ...but these will: */}
    <AutoCompleteItem key={1} value="123"></AutoCompleteItem>
    <AutoCompleteItem key={2} value="1234"></AutoCompleteItem>
</AutoCompleteList>

This is relevant, for example, when using a component as an observable for on-scroll api pagination, like in the following:

<AutoCompleteList>
    {papers.map((paper) => (
       <AutoCompleteItem
            key={paper.pmid}
            value={paper.title}
      >
      </AutoCompleteItem>
    ))}
    {/* The `Box` below renders, but the suggestions list doesn't */}
    <Box id="watcher" />{/* This component would be used for the Intersection Observer API */}
    {/* This could optionally be an empty `AutoCompleteItem` so it works with the `emptyState` prop from `AutoComplete */}
    {/* since `emptyState` only cares about `AutoCompleteItem`s */}
    <AutoCompleteItem value="" id="watcher" />
</AutoCompleteList>

The box is rendered, which would allow me to use it as an observable, but the suggestion list isn’t, so it basically breaks the component’s functionality. Also, in addition to that, I found another bug: whenever i use either a static string or a number converted to a string as the AutoCompleteItem’s value inside the map, the suggestions list also breaks but only while typing because, as soon as I unfocus the component, the suggestions list is rendered correctly. For example:

<AutoCompleteList>
    {papers.map((paper) => (
       <AutoCompleteItem
            key={paper.pmid}
            value={paper.pmid.toString()} {/* Suggestion list doesn't update while typing */ }
      >
      </AutoCompleteItem>
    ))}
</AutoCompleteList>

Or:

<AutoCompleteList>
    {papers.map((paper) => (
       <AutoCompleteItem
            key={paper.pmid}
            value="test" {/* Also doesn't show while typing */}
      >
      </AutoCompleteItem>
    ))}
</AutoCompleteList>

Tell me if you require any additional information.

[flayner2]

I managed to get my example working. I figured that the AutoCompleteGroup didn’t like a mixture of static elements and arrays of elements, so I combined the static element (in my case the group title) into the array:

I thought about doing that as well, but turns out react-aria’s useCombobox fits my necessities much better, since it is really good at dealing with async data (with the help of react-stately’s useAsyncList), it is much more customizable and has inbuilt support for API pagination.

[Daidalos117]

should be fixed in the newest release, check it out guys