Show command list only when user starts typing?

[donfour]

I have a use case for a user search:

While the text input is empty, I do not want to show search results. And while a user starts typing in text, I'd like to call a backend endpoint to fetch search results. Is this something cmdk supports, or is it out of scope?

What I've tried

I tried turning <Command.Input> into a controlled component, but that seems to break <CommandEmpty> behavior a bit:

const Demo = () => {
  const [value, setValue] = useState("");

  return (
      <Command>
        <Command.Input
          placeholder="Enter name, @username, or email..."
          value={value}
          onValueChange={setValue}
        />
        {value !== "" && (
          <Command.List>
            <Command.Empty>No results found.</Command.Empty>
            <Command.Item>John</Command.Item>
            <Command.Item>Bob</Command.Item>
            <Command.Item>Mary</Command.Item>
          </Command.List>
        )}
      </Command>
  );
}

In this sample, when I type in a single character that doesn't exist in any of my options (e.g. z), the<Command.Empty> component doesn't get rendered. However, when I type in another character (so input text is zz), the empty component is rendered.

I expected the empty component to render on my first character. Am I missing something?

[donfour]

I seem to have fixed the issue with this #149 (by removing isFirstRender logic)