mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: rework keyboard shortcuts to focus search bar (#1854)

Browse source
This commit is contained in:
metonym 2023-11-21 11:48:22 -08:00 • committed by GitHub
commit d4e590fb07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

15
docs/src/pages/_layout.svelte
View file

@ -1,8 +1,3 @@
<script context="module">
// Pressing these keys will focus the search bar.
const FOCUS_KEYS = new Set(["/", "Metak"]);
</script>
<script> <script>
import { import {
isActive, isActive,
@ -47,7 +42,6 @@
const deprecated = []; const deprecated = [];
const new_components = []; const new_components = [];
let keys = "";
let value = ""; let value = "";
let active = false; let active = false;
$: results = miniSearch.search(value).slice(0, 10); $: results = miniSearch.search(value).slice(0, 10);
@ -72,12 +66,7 @@
<svelte:body <svelte:body
on:keydown="{(e) => { on:keydown="{(e) => {
keys += e.key;
}}"
on:keyup="{(e) => {
if (active) return; if (active) return;
if (FOCUS_KEYS.has(keys)) {
if ( if (
document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLInputElement ||
document.activeElement instanceof HTMLTextAreaElement document.activeElement instanceof HTMLTextAreaElement
@ -85,12 +74,10 @@
// Exit early if an inputtable element is already focused. // Exit early if an inputtable element is already focused.
return; return;
} }
if ((e.metaKey && e.key === 'k') || e.key === '/') {
e.preventDefault(); e.preventDefault();
active = true; active = true;
} }
keys = '';
}}" /> }}" />
<Theme persist bind:theme="{$theme}"> <Theme persist bind:theme="{$theme}">