Render CommandList in Popover only

[wadeamaral]

What is the proper way to only display the CommandList in a popover and not the entire Command? Looking to build an AutoComplete component instead of a DropDown component.

Attempting to port the CommandList inside a Radix Popover, I am losing the functionality of command. While this preserves the up/down arrow functionality it seems like a work-around. Didn't know if there was a more "proper" way.

I currently have the following:

const [open, setOpen] = React.useState(false);

	return (
		<Command className="overflow-visible">
			<CommandInput
				onFocus={() => {
					setOpen(true);
				}}
				onBlur={() => {
					setOpen(false);
				}}
			/>

			{open && (
				<div className="relative">
					<CommandList className="absolute w-full z-10 top-2 animate-in">
					</CommandList>
				</div>
			)}
		</Command>
	);

[pacocoursey]

Hey, if you upgrade to [email protected] this is now possible. You can even render the Command.List part inside of a portal if needed.

[Adam-Collier]

I would also love to see an example, I can get the list in the Popover rendering, but focus is lost when trying to click a Command item

[zahidiqbalnbs]

@pacocoursey please provide an update on this how to use this? @Adam-Collier were you able to do that? if yes please provide a sample code.

Also sometimes getting the error TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

[willviles]

I believe the secret sauce is to prevent default on the onOpenAutoFocus prop on PopoverContent:

<PopoverContent onOpenAutoFocus={(e) => e.preventDefault()}>
  <CommandList>
    // ...
  </CommandList>
</PopoverContent>

[peguerosdc]

Can someone provide a full example? I am unable to make it work only with the hints :(

[msickpaler]

this is my code.
command and popover were added using shadcn.
It doesn't work when you focus it using the keyboard, but it does work when you click on it.
css use tailwindcss.
If you have something that also works with the keyboard, please share it.

import * as React from "react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/component/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/component/ui/popover"

export const Example = () => {
  const list = [
    {
      id: "1",
      title: "foo",
    },
    {
      id: "2",
      title: "bar",
    },
    {
      id: "3",
      title: "baz",
    },
  ]
  const [selectedId, setSelectedId] = React.useState<string | undefined>(
    undefined,
  )

  const [open, setOpen] = React.useState(false)

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <Command>
        <PopoverTrigger asChild>
          <CommandInput placeholder="search" />
        </PopoverTrigger>
        <PopoverContent className="w-[var(--radix-popover-trigger-width)]" onOpenAutoFocus={(e) => e.preventDefault()}>
          <CommandList>
            <CommandEmpty>it's empty</CommandEmpty>
            <CommandGroup>
              {list.map((item) => (
                <CommandItem
                  key={item.id}
                  value={item.id}
                  onSelect={(currentValue) => {
                    setSelectedId(currentValue)
                    setOpen(false)
                  }}
                >
                  {item.title}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </PopoverContent>
      </Command>
    </Popover>
  )
}