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 cmdk@1.0.0 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>
  )
}

[DHFW]

@msickpaler I have found a way to have it working with keyboard as well. Not beautiful, but working, except for a slight flicker after selecting an item. Modified from a version here

This supports supplying items with value, label structure. It is also working in a ShadCN/Radix dialog. Using cmdk version 1.0.4.
The onValueChange gives you back the option (so value and label). Because I bind it to a form it is already has a value. Clicking (or tabbing) on the input opens the whole list and clears the input. Clicking outside the popover will place the initial value back (the valueLocalBackup). This can possibly be handled nicer.

import { IconCheck } from '@tabler/icons-react';
import { Command as CommandPrimitive } from 'cmdk';
import { useEffect, useState } from 'react';
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '~/components/ui/command';
import { cn } from '~/lib/utils';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import { Skeleton } from '../ui/skeleton';

export type Option = Record<'value' | 'label', string> & Record<string, string>;

type AutoCompleteProps = {
  id: string;
  options: Option[];
  emptyMessage: string;
  value?: Option;
  onValueChange?: (value: Option) => void;
  isLoading?: boolean;
  disabled?: boolean;
  placeholder?: string;
};

export const AutoComplete = ({
  id,
  options,
  placeholder,
  emptyMessage,
  value,
  onValueChange,
  disabled,
  isLoading = false,
}: AutoCompleteProps) => {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState<string | undefined>(undefined);
  const [valueLocal, setValueLocal] = useState<Option | undefined>(value);
  const [valueLocalBackup, setValueLocalBackup] = useState<Option | undefined>(
    value,
  );

  useEffect(() => {
    if (value) {
      setValueLocal(value);
      setValueLocalBackup(value);
      setSearch(value.label);
    }
  }, [value]);

  return (
    <div className="flex items-center">
      <Popover open={open}>
        <Command loop>
          <PopoverTrigger asChild>
            <CommandInput
              id={id}
              value={search}
              placeholder={placeholder}
              disabled={disabled}
              onValueChange={setSearch}
              onKeyDown={(e) => setOpen(e.key !== 'Escape')}
              onMouseDown={() => {
                setSearch('');
                setOpen(true);
                setValueLocal(undefined);
              }}
              onFocus={() => {
                setSearch('');
                setValueLocal(undefined);
                setOpen(true);
              }}
              onBlur={(e) => {
                setTimeout(() => {
                  if (!e.relatedTarget?.hasAttribute('cmdk-list')) {
                    if (valueLocal) {
                      setTimeout(() => {
                        onValueChange?.(valueLocal);
                      }, 0);
                      setSearch(
                        valueLocal
                          ? (options.find(
                              (option) => option.value === value?.value,
                            )?.label ?? '')
                          : '',
                      );
                    }
                  }
                }, 0);
              }}
            ></CommandInput>
          </PopoverTrigger>
          {!open && <CommandList aria-hidden="true" className="hidden" />}
          <PopoverContent
            asChild
            align="start"
            onOpenAutoFocus={(e) => e.preventDefault()}
            onInteractOutside={(e) => {
              if (
                e.target instanceof Element &&
                e.target.hasAttribute('cmdk-input')
              ) {
                e.preventDefault();
              } else {
                setOpen(false);
                if (value) {
                  setTimeout(() => {
                    setSearch(valueLocalBackup?.label ?? '');
                    setValueLocal(valueLocalBackup);
                  }, 0);
                }
              }
            }}
            className="w-[calc(--radix-popover-trigger-width + 36px)] -ml-9 p-0"
          >
            <CommandList>
              {isLoading ? (
                <CommandPrimitive.Loading>
                  <div className="p-1">
                    <Skeleton className="h-8 w-full" />
                  </div>
                </CommandPrimitive.Loading>
              ) : null}
              <CommandEmpty>{emptyMessage}</CommandEmpty>
              <CommandGroup>
                {options.map((option) => (
                  <CommandItem
                    key={option.value}
                    value={option.label}
                    onMouseDown={(e) => e.preventDefault()}
                    onSelect={(currentValue) => {
                      const val = options.find(
                        (option) => option.label === currentValue,
                      );

                      setSearch(
                        currentValue === value?.value
                          ? ''
                          : (options.find(
                              (option) => option.label === currentValue,
                            )?.label ?? ''),
                      );
                      setOpen(false);
                      setValueLocal(val);
                      if (val) {
                        setTimeout(() => {
                          onValueChange?.(val);
                        }, 0);
                      }
                    }}
                  >
                    <IconCheck
                      className={cn(
                        'mr-2 h-4 w-4',
                        value?.value === option.value
                          ? 'opacity-100'
                          : 'opacity-0',
                      )}
                    />
                    {option.label}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </PopoverContent>
        </Command>
      </Popover>
    </div>
  );
};