cmdk hotkeys work if input if focsed

This commit is contained in:
Nikita Galaiko 2023-04-24 12:23:19 +02:00
parent 70d61314a6
commit 0d21f17509
3 changed files with 153 additions and 153 deletions

View File

@ -61,7 +61,7 @@
action.href.startsWith('http') || action.href.startsWith('mailto') action.href.startsWith('http') || action.href.startsWith('mailto')
? open(action.href) ? open(action.href)
: goto(action.href); : goto(action.href);
modal?.hide(); modal?.close();
} else if (Action.isGroup(action)) { } else if (Action.isGroup(action)) {
selectedGroup.set(action); selectedGroup.set(action);
} }
@ -115,11 +115,9 @@
if (command.hotkey) { if (command.hotkey) {
unregisterCommandHotkeys.push( unregisterCommandHotkeys.push(
tinykeys(window, { tinykeys(window, {
[command.hotkey]: (event: KeyboardEvent) => { [command.hotkey]: () => {
const target = event.target as HTMLElement; if (!modal?.isOpen()) return;
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return; trigger(command.action);
// only trigger if the modal is visible
modal?.isOpen() && trigger(command.action);
} }
}) })
); );

View File

@ -35,14 +35,15 @@ export type Group = {
const goToProjectGroup = ({ projects, input }: { projects: Project[]; input: string }): Group => ({ const goToProjectGroup = ({ projects, input }: { projects: Project[]; input: string }): Group => ({
title: 'Go to project', title: 'Go to project',
commands: projects commands: projects
.map((project) => ({ .filter(({ title }) => input.length === 0 || title.toLowerCase().includes(input.toLowerCase()))
.map((project, i) => ({
title: project.title, title: project.title,
hotkey: `${i + 1}`,
action: { action: {
href: `/projects/${project.id}/` href: `/projects/${project.id}/`
}, },
icon: IconProject icon: IconProject
})) }))
.filter(({ title }) => input.length === 0 || title.toLowerCase().includes(input.toLowerCase()))
}); });
const actionsGroup = ({ project, input }: { project: Project; input: string }): Group => ({ const actionsGroup = ({ project, input }: { project: Project; input: string }): Group => ({
@ -66,6 +67,7 @@ const actionsGroup = ({ project, input }: { project: Project; input: string }):
}, },
{ {
title: 'Replay History', title: 'Replay History',
hotkey: 'Shift+R',
action: { action: {
title: 'Replay working history', title: 'Replay working history',
commands: [ commands: [

View File

@ -12,7 +12,7 @@
}; };
export const isOpen = () => open; export const isOpen = () => open;
const close = () => { export const close = () => {
open = false; open = false;
dialog.close(); dialog.close();
}; };