mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
docs: "/" or "CMD+K" should focus search bar (#1852)
This commit is contained in:
parent
5d8e9aceb4
commit
b0b51a818a
1 changed files with 29 additions and 0 deletions
|
@ -1,3 +1,8 @@
|
|||
<script context="module">
|
||||
// Pressing these keys will focus the search bar.
|
||||
const FOCUS_KEYS = new Set(["/", "Metak"]);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import {
|
||||
isActive,
|
||||
|
@ -42,6 +47,7 @@
|
|||
const deprecated = [];
|
||||
const new_components = [];
|
||||
|
||||
let keys = "";
|
||||
let value = "";
|
||||
let active = false;
|
||||
$: results = miniSearch.search(value).slice(0, 10);
|
||||
|
@ -64,6 +70,29 @@
|
|||
<!-- routify:options bundle=true -->
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<svelte:body
|
||||
on:keydown="{(e) => {
|
||||
keys += e.key;
|
||||
}}"
|
||||
on:keyup="{(e) => {
|
||||
if (active) return;
|
||||
|
||||
if (FOCUS_KEYS.has(keys)) {
|
||||
if (
|
||||
document.activeElement instanceof HTMLInputElement ||
|
||||
document.activeElement instanceof HTMLTextAreaElement
|
||||
) {
|
||||
// Exit early if an inputtable element is already focused.
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
active = true;
|
||||
}
|
||||
|
||||
keys = '';
|
||||
}}" />
|
||||
|
||||
<Theme persist bind:theme="{$theme}">
|
||||
<Header
|
||||
aria-label="Navigation"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue