Empty state for Autocomplete

[fellipeutaka]

I'm migrating from cmdk to the new Autocomplete component from RAC while trying to keep the same API. One of the challenges I'm facing is implementing the <Command.Empty /> component, which should be rendered when no items are found.

However, I'm struggling to access the collection size inside <Command.Empty />. I'm attempting to consume MenuStateContext, but it returns null.

Here’s a simplified version of my implementation:

export interface CommandRootProps
  extends React.ComponentProps<typeof Autocomplete> {
  filterOptions?: Parameters<typeof useFilter>[0];
}

export function CommandRoot({
  filter,
  filterOptions,
  ...props
}: CommandRootProps) {
  const { contains } = useFilter({ sensitivity: "base", ...filterOptions });

  return <Autocomplete filter={filter ?? contains} {...props} />;
}

export function CommandEmpty({ className, ...props }: CommandEmptyProps) {
  const state = useContext(MenuStateContext);

  if (state?.collection.size > 0) {
    return null;
  }

  return (
    <div
      role="presentation"
      {...props}
      className={CommandStyles.Empty({ className })}
    />
  );
}

And here’s how it’s being used:

<Command.Root>
  <MySearchField placeholder="Search commands..." />

  <Command.List className="px-2">
    <Command.Empty>No results found.</Command.Empty>

    <Command.Group>
      <Command.Header>Links</Command.Header>
      <Collection items={mainNav}>
        {(navItem) => (
          <Command.Item
            id={navItem.href}
            textValue={navItem.title}
            isDisabled={navItem.disabled}
            onAction={handleNavigate(navItem.href)}
          >
            <Icons.File className="size-5" />
            {navItem.title}
          </Command.Item>
        )}
      </Collection>
    </Command.Group>
  </Command.List>
</Command.Root>

Summary:

• MenuStateContext is returning null inside <Command.Empty />, even though it's rendered within <Command.List>, which is effectively a wrapper around the Menu component from React Aria.
• Shouldn't <Command.Empty /> have access to the MenuStateContext?
• What would be the correct way to check if there are no items in the collection from within <Command.Empty />?

Any guidance would be greatly appreciated!

[victormicco]

I'm facing the same issue