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.

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

Programmatically set selection without affected input value #243

Open
mthines opened this issue Mar 26, 2024 · 1 comment
Open

Programmatically set selection without affected input value #243

mthines opened this issue Mar 26, 2024 · 1 comment

Comments

@mthines
Copy link

mthines commented Mar 26, 2024

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.

cmdk.mov

Thanks!

@DjordyKoert
Copy link

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>
        );

};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants