Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Idea: shouldFilter per Group/Item #107

Open
nandorojo opened this issue Apr 4, 2023 · 2 comments · May be fixed by #257
Open

Idea: shouldFilter per Group/Item #107

nandorojo opened this issue Apr 4, 2023 · 2 comments · May be fixed by #257

Comments

@nandorojo
Copy link

I have some items which I'm fetching from TypeSense and don't need filtering. Others are statically-defined. It would be useful to define shouldFilter at the Item/Group level, rather than only the parent. I believe cmdk is built in a way where this would be possible, but I haven't peaked at the source in a while, so I'm not totally sure. Figured I'd mention it!
@joseph-mccombs
Copy link

joseph-mccombs commented Apr 10, 2023 •
edited
Loading

@nandorojo One way around this I found, is to use the searchFilter prop and assign something common to the <Command.Group> value prop to ensure that these items dont get filtered like so:

<Command
     filter={(value, search) => {
       if (value.includes(search) || value.includes("doNotFilter-")) return 1; // ensures items arent filtered
       return 0;
     }}
>
   <Command.Group>
      {unfilteredItem.map((item) => (
         <Command.Item value={`doNotFilter-${item.name}`} />
      )}
   </Command.Group>
   <Command.Group>
      {filtered.map((item) => (
         <Command.Item value={item.name} />
      )}
   </Command.Group>
</Command>

@Jamess-Lucass Jamess-Lucass linked a pull request May 10, 2024 that will close this issue
Open
@Jamess-Lucass
Copy link

I've also ran into a very similar use case to you, where my command consists of static data, such as links to pages, but also has dynamic data which has been fetching and searched via an API.

For example:

const Page = () => {
  const [searchTerm, setSearchTerm] = React.useState<string>('');

  const { data: itemsA } = useSearchItemsA({
    query: {
      search: searchTerm,
    },
    enabled: !!searchTerm,
  });

  const { data: itemsB } = useSearchItemsB({
    query: {
      search: searchTerm,
    },
    enabled: !!searchTerm,
  });

  return (
    <div>
      <Command>
        <Command.Input placeholder="Search…" onValueChange={setSearchTerm} />
        <Command.List>
          <Command.Empty>No results.</Command.Empty>
          <Command.Group heading="Links">
            <Command.Item>Link A</Command.Item>
            <Command.Item>Link B</Command.Item>
            <Command.Item>Link C</Command.Item>
          </Command.Group>

          {/* This data has already been filtered by an external source, do not apply additional filtering */}
          <Command.Group heading="Items A">
            {itemsA.map((item) => (
              <Command.Item key={item.id}>{item.name}</Command.Item>
            ))}
          </Command.Group>

          {/* This data has already been filtered by an external source, do not apply additional filtering */}
          <Command.Group heading="Items B">
            {itemsB.map((item) => (
              <Command.Item key={item.id}>{item.name}</Command.Item>
            ))}
          </Command.Group>
        </Command.List>
      </Command>
    </div>
  );
};

I've opened a PR, which adds shouldFilter to the Command.Item component so these items can be skipped during any filtering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(item): Added ability to disable Command.Item from filtering Jamess-Lucass/cmdk
3 participants
@nandorojo @Jamess-Lucass @joseph-mccombs