How to make CommandItem sticky in CommandGroup

[zahidiqbalnbs]

Hi,

I want to make CommandItem sticky within CommandGroup.

Here is my code and want to make 'select all' stick.

<div className="relative z-10">
          {open && (
            <CommandList
              className={cn(
                'absolute top-1 z-10 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in w-full',
                commandProps?.cmdListClassName,
              )}
            >
              {isLoading ? (
                <>{loadingIndicator}</>
              ) : (
                <>
                  {EmptyItem()}
                  {CreatableItem()}
                  {!selectFirstItem && <CommandItem value="-" className="hidden" />}
                  {Object.entries(options).map(([key, dropdowns]) => (
                    <CommandGroup key={key} heading={key} className="h-full">
                      <>
                        {enableSelectAll && (
                          <CommandItem
                            key="all"
                            onSelect={toggleAll}
                            onMouseDown={(e) => {
                              e.preventDefault()
                              e.stopPropagation()
                            }}
                            className="cursor-pointer sticky top-0 border-b-2 py-2"
                          >
                            <div
                              className={cn(
                                'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
                                selected.length === dropdowns.length
                                  ? 'bg-primary text-primary-foreground'
                                  : 'opacity-50 [&_svg]:invisible',
                              )}
                            >
                              <CheckIcon className="h-4 w-4" />
                            </div>
                            <span>Select all</span>
                          </CommandItem>
                        )}
                        {dropdowns.map((option) => {
                          const isSelected = selected?.some((s) => s.value === option.value)
                          return (
                            <CommandItem
                              key={option.value}
                              value={option.value}
                              disabled={option.disable || (selected.length >= maxSelected && !isSelected)}
                              onMouseDown={(e) => {
                                e.preventDefault()
                                e.stopPropagation()
                              }}
                              onSelect={() => {
                                isSelected ? handleUnselect(option) : handleSelect(option)
                              }}
                              className={cn(
                                'cursor-pointer',
                                option.disable && 'cursor-default text-muted-foreground',
                                isSelected ? 'bg-selected-default-subtlest text-primary' : 'aria-selected:bg-slate-0',
                              )}
                            >
                              {option.label}
                              {isSelected && <CheckIcon className="ml-auto h-4 w-4 text-primary" />}
                            </CommandItem>
                          )
                        })}
                      </>
                    </CommandGroup>
                  ))}
                </>
              )}
            </CommandList>
          )}
        </div>` 

[appinteractive]

if you have found a solution, its always helpful to add it to an issue when closing it.