Separator always appears at top of list

[fauxparse]

{results.map((result) => (
  <Command.Item key={result.id}>{result.label}</Fragment>
)}
<Command.Separator alwaysRender={results.length > 0} />
<Command.Item value={query} onSelect={() => add(query)}>
  Add “{query}”
</Command.Item>

The separator element always appears at the top of the list for some reason, regardless of where it is in the source.

[arthurjdam]

Are you manually filtering the results and using <Command shouldFilter={false}>? This works fine:

const [query, setQuery] = useState('');
const filteredResults = useMemo(
    () =>
        query.length === 0 
            ? results
            : results.filter((result) => {
                    return result.label
                        .toLowerCase()
                        .includes(query.toLowerCase());
                }),
    [query]
);

return (
    <Command shouldFilter={false}>
        <Command.Input value={query} onValueChange={setQuery} />
        <Command.List>
            <Command.Group>
                {filteredResults.map((result) => (
                    <Command.Item key={result.id}>
                        {result.label}
                    </Command.Item>
                ))}
                <Command.Separator
                    alwaysRender={filteredResults.length > 0}
                />
                <Command.Item value={query}>Add “{query}”</Command.Item>
            </Command.Group>
        </Command.List>
    </Command>
);