From 4af87af3370bf525b31b5d9a72380041bd5d927a Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Wed, 31 Jan 2024 21:07:13 +0800
Subject: [PATCH] feat: press `/` to focus on the search bar like youtube

---
 src/components/SearchBar/SearchBar.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index e1766e71..e5bdf303 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -1,5 +1,6 @@
 <!-- TODO: refactor all that code -->
 <script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
 import {
   addSearchHistory,
@@ -14,6 +15,7 @@ defineProps<{
   focusedCharacter?: string
 }>()
 
+const keywordRef = ref<HTMLInputElement>()
 const isFocus = ref<boolean>(false)
 const keyword = ref<string>('')
 const suggestions = reactive<SuggestionItem[]>([])
@@ -28,6 +30,16 @@ watch(isFocus, async (focus) => {
     searchHistory.value = await getSearchHistory()
 })
 
+onKeyStroke('/', (e) => {
+  e.preventDefault()
+  keywordRef.value?.focus()
+})
+onKeyStroke('Escape', (e) => {
+  e.preventDefault()
+  keywordRef.value?.blur()
+  isFocus.value = false
+}, { target: keywordRef })
+
 function handleInput() {
   selectedIndex.value = -1
   if (keyword.value.length > 0) {
@@ -164,6 +176,7 @@ async function handleClearSearchHistory() {
       </Transition>
 
       <input
+        ref="keywordRef"
         v-model.trim="keyword"
         rounded="60px focus:$bew-radius"
         p="l-6 r-16 y-3"