feat(search-bar): use cmd + k to focus on mac

This commit is contained in:
Corentin Thomasset 2022-12-21 00:21:12 +01:00
parent bfc2e24bbf
commit bf88836dbe
No known key found for this signature in database
GPG key ID: DBD997E935996158

View file

@ -40,16 +40,25 @@ const keys = useMagicKeys({
if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') { if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') {
e.preventDefault(); e.preventDefault();
} }
if (e.metaKey && e.key === 'k' && e.type === 'keydown') {
e.preventDefault();
}
}, },
}); });
whenever(keys.ctrl_k, () => { whenever(keys.ctrl_k, () => {
focusTarget.value.focus(); focusTarget.value.focus();
}); });
whenever(keys.meta_k, () => {
focusTarget.value.focus();
});
function renderOption({ tool }: { tool: Tool }) { function renderOption({ tool }: { tool: Tool }) {
return h(SearchBarItem, { tool }); return h(SearchBarItem, { tool });
} }
const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('mac'));
</script> </script>
<template> <template>
@ -68,7 +77,7 @@ function renderOption({ tool }: { tool: Tool }) {
ref="focusTarget" ref="focusTarget"
round round
clearable clearable
placeholder="Search a tool... [Ctrl + K]" :placeholder="`Search a tool (use ${isMac ? 'Cmd' : 'Ctrl'} + K to focus)`"
:value="slotValue" :value="slotValue"
:input-props="{ autocomplete: 'disabled' }" :input-props="{ autocomplete: 'disabled' }"
@input="handleInput" @input="handleInput"