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

[fellipeutaka]

The best I could do was using the renderEmptyState prop in the Menu component.

renderEmptyState={() => (
  <Command.Empty>No results found.</Command.Empty>
)}

[wmodden]

I'm facing the same issue

For hours, I've been trying to create a component where I can dynamically filter data from my api to show categories, I choose the <ComboBox /> component for this task

1. I fetch data with react query
2. I transform the data with the select RQ option
3. I pass the transformed items to my custom ComboBox component
4. when items is an empty array ([]), I would expect the renderEmptyState prop to work but nothing is showing up

I would expect the ReactNode passed in renderEmptyState to display but to my surprise it does not.

<ListBox renderEmptyState={(} => <div>This is not working should be displayed </div>
    // jsx omitted 
 </ListBox>

[snowystinger]

Thanks for the discussion, would you mind putting together a codesandbox or stackblitz with the minimal code to demonstrate the issue? That will make it much easier for us to assist you.

[wmodden]

Yes, let me create ond