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.

[erictu22]

running into something similar

[samuelkarani]

Same thing here

[lukefiji]

@pacocoursey could you please give an example of how we could do that?

[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))