CommandSeparator not render with dynamic content

[zougari47]

I try to use the command separator component but it's not rendered when using it with dynamic content. with static content works fine

I'm using Shadcn UI here is my snippet

<Command className="rounded-lg border shadow-md" value={input}>
            <CommandInput
              placeholder="Type a command or search..."
              value={input}
              onValueChange={txt => {
                setInput(txt)
              }}
            />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>

              {Object.keys(suggestions).map((category, index) => {
                const items = suggestions[category as keyof typeof suggestions]
                if (items.length > 0) {
                  return (
                    <Fragment key={category}>
                      <CommandGroup
                        heading={
                          <span className="flex items-center gap-2 text-semibold">
                            {icons[category as Category]}
                            <span>{formatCategoryName(category)}</span>
                          </span>
                        }
                      >
                        {items.map(item => (
                          <CommandItem key={item}>{item}</CommandItem>
                        ))}
                      </CommandGroup>
                      {index < Object.keys(suggestions).length - 1 && (
                        <CommandSeparator />
                      )}
                      <CommandSeparator />
                    </Fragment>
                  )
                }
                return null
              })}
            </CommandList>
          </Command>

[zougari47]

I try to use the command separator component but it's not rendered when using it with dynamic content. with static content works fine

I'm using Shadcn UI here is my snippet

<Command className="rounded-lg border shadow-md" value={input}>
            <CommandInput
              placeholder="Type a command or search..."
              value={input}
              onValueChange={txt => {
                setInput(txt)
              }}
            />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>

              {Object.keys(suggestions).map((category, index) => {
                const items = suggestions[category as keyof typeof suggestions]
                if (items.length > 0) {
                  return (
                    <Fragment key={category}>
                      <CommandGroup
                        heading={
                          <span className="flex items-center gap-2 text-semibold">
                            {icons[category as Category]}
                            <span>{formatCategoryName(category)}</span>
                          </span>
                        }
                      >
                        {items.map(item => (
                          <CommandItem key={item}>{item}</CommandItem>
                        ))}
                      </CommandGroup>
                      {index < Object.keys(suggestions).length - 1 && (
                        <CommandSeparator />
                      )}
                      <CommandSeparator />
                    </Fragment>
                  )
                }
                return null
              })}
            </CommandList>
          </Command>

Also the key navigation not working with dynamic content

[paulwongx]

@zougari47 Were you able to find any fix for this? I'm encountering a similar issue for dynamic content. The list of items don't show properly when the search changes

Edit: I fixed my issue. Ugh.... I needed to turn the shoulderFilter={false}

As per the docs

<Command shouldFilter={false}>
  <Command.List>
    {filteredItems.map((item) => {
      return (
        <Command.Item key={item} value={item}>
          {item}
        </Command.Item>
      )
    })}
  </Command.List>
</Command>