pacocoursey / cmdk

Fast, unstyled command menu React component.
https://cmdk.paco.me
MIT License
9.03k stars 258 forks source link

Programmatically set selection without affected input value #243

Open mthines opened 3 months ago

mthines commented 3 months ago

Hi.

I would like to implement the PageUp/PageDown functionality which, but it doesn't look like the library supports setting the Selection programmatically - which renders the functionality of PageUp/PageDown useless as when you press up/down arrow, it scrolls back up because the selection remains the same.

I can see that Home/End works natively with the library and moves the selection.

I wish the library exposed the internal API and gave me the possibility to programmatically set the selection.

https://github.com/pacocoursey/cmdk/assets/16097850/d69da2f4-fadb-440f-98c9-c7f8535ae1b3

Thanks!

DjordyKoert commented 1 month ago

I think my question/feature is related to this.

(We use the shadcn/ui Command component for this)

I would like to integrate the item selection with tanstack router <Link> preloading to prefetch some data before selecting the command item.

We currently partially fixed this by using a ref on the <Link> component to manage the onSelect (navigating) & onFocus (preloading) but we are still missing preloading whenever the user navigate with the arrow keys.

const ActionItem: React.FC<action: TAction> = ({ action }) => {
    const linkRef = useRef<HTMLAnchorElement>(null);

    return (
            <Link {...action.linkOptions} ref={linkRef}>
                <CommandItem 
                   disabled={action.isDisabled} 
                    onFocus={() => linkRef.current?.focus()} 
                    onSelect={() => linkRef.current?.click()} 
                    keywords={action.keywords} 
                    value={`${action.action};${action.description}`}>
                    <p> {action.title} </p>
                </CommandItem>
            </Link>
        );

};