Ungrouped items are sorted to the bottom?

[mark-axel]

'use client'
import { Command } from 'cmdk'

export default function CommandMenuTest() {
  return (
    <Command loop className='border border-black'>
      <Command.Input />
      <Command.List>
        <div className='pt-1' />
        {/* Adding the group makes 'none' show up first */}
        {/* <Command.Group> */}
        <Command.Item value={'none'}>none</Command.Item>
        {/* </Command.Group> */}
        <Command.Group heading='Examples'>
          <Command.Item key={'normal'} value='normal'>
            normal
          </Command.Item>
        </Command.Group>
        <div className='pt-1' />
        {/* When you type 'n', the "None" result appears here */}
      </Command.List>
    </Command>
  )
}

In this example, typing 'n' results in the ungrouped "None" option being sorted to the bottom. But I want it sorted to the top.

And when you backspace the 'n' so that the input is empty, the sort order stays stuck with "None" at the bottom. I don't know of a sequence of keys to press to get back to original state.

Workaround: put the "None" option into an untitled group.