Issue with mapping over items with command.item and group

[tinotaylor]

When upgrading to v1 from v0.2.0 I have come across the following error when mapping over items inside of a command.group when using command.item for children:

edit: it looks like this happens regardless of mapping items. Something to do with the combination of group and item.

error: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

I can't workout why this issue is now showing up. If I use a regular div in place of the command.item, the mapped items render with no issues.

Any help is greatly appreciated 🙏🏻

[HubrG]

Same issue... I went back to the previous version.

[tinotaylor]

Yh same here. Not sure what happened

[divmgl]

I'm also having issues with 1.0.

It's unfortunate; I really need cmdk to stop making my values lowercase.

[pacocoursey]

Can you provide a minimal reproduction? Are you rendering (the mandatory) Command.List part?

[HubrG]

WIth Shad/cn

<PopoverContent className="w-[200px] p-0">
          <Command
            defaultValue={
              feature && feature.categoryId ? feature.categoryId : ""
            }>
            <CommandInput
              id="search-input"
              onValueChange={(e) => {
                setSearchInput(e);
              }}
              placeholder="Search category..."
            />
            <CommandEmpty
              className="flex flex-col justify-center p-2 w-full items-center"
              onClick={handleCreateCategory}>
              <small>Create category</small>
              <strong>{searchInput}</strong>
            </CommandEmpty>
            <CommandGroup defaultValue={feature.categoryId ?? undefined}>
              <CommandItem
                className="font-bold  hover:bg-primary"
                key="no-category"
                value=""
                onSelect={(e) => {
                  setValue("");
                  setOpen(false);
                  handleSelectCategory(e);
                }}>
                <Check
                  className={cn(
                    "mr-2 h-4 w-4",
                    value === "" ? "opacity-100" : "opacity-0"
                  )}
                />
                No category
              </CommandItem>
              {saasFeaturesCategories.map((category) => (
                <CommandItem
                  key={category.id}
                  value={category.name ?? ""}
                  id={category.id}
                  onSelect={(e) => {
                    setValue(category.name ?? "");
                    setOpen(false);
                    handleSelectCategory(category.id);
                  }}>
                  <Check
                    className={cn(
                      "mr-2 h-4 w-4",
                      value === category.name ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {category.name}
                </CommandItem>
              ))}
              {searchInput &&
                (() => {
                  const normalizedSearchInput = searchInput.toUpperCase();
                  const categoryExists = _.some(
                    saasFeaturesCategories,
                    (category) =>
                      _.toUpper(category.name ?? "") === normalizedSearchInput
                  );
                  if (!categoryExists) {
                    return (
                      <CommandItem
                        key={searchInput}
                        className="border-t flex flex-col justify-center p-2 w-full items-center"
                        value={searchInput}
                        id={searchInput}
                        onKeyDown={(e) => {
                          if (e.key === "Enter") {
                            handleCreateCategory();
                          }
                        }}
                        onSelect={(e) => {
                          setValue(searchInput);
                          setOpen(false);
                          handleCreateCategory();
                        }}>
                        <small>Create category</small>
                        <strong>{searchInput}</strong>
                      </CommandItem>
                    );
                  }
                })()}
            </CommandGroup>
          </Command>
        </PopoverContent>

[pacocoursey]

@HubrG You are not rendering the CommandList part.

[HubrG]

@pacocoursey

Great ! Thanks ! It's working with the 1.0 and CommandList.

For your information, the Shad/cn examples don't mention the use of CommandList, even though the component is present in the library.

[pacocoursey]

I updated the 1.0.0 release notes to mention that Command.List is now required. I'll check about opening a PR in shadcn to make sure CommandList is included in the examples.

[wobsoriano]

https://github.com/shadcn-ui/ui/pull/2945

[jhnguyen521]

shadcn-ui/ui#2945

My PR above will handle the example documentation for shadcn :)