From eee671cdc3deac21789ea261e467d27ebbba463c Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Mon, 1 Apr 2024 14:24:42 +0900
Subject: [PATCH] fix: improve keyboard operability especially on search page
 and editor (#2730)

Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>
---
 components/publish/PublishWidget.vue |  1 +
 components/search/SearchWidget.vue   |  1 +
 pages/[[server]]/search.vue          | 13 ++++++++++---
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 7310dfde..cfdb9960 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -283,6 +283,7 @@ onDeactivated(() => {
             flex max-w-full
             :class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
             @keydown="stopQuestionMarkPropagation"
+            @keydown.esc.prevent="editor?.commands.blur()"
           />
         </div>
 
diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue
index 3eb31b50..ee73f9e1 100644
--- a/components/search/SearchWidget.vue
+++ b/components/search/SearchWidget.vue
@@ -82,6 +82,7 @@ function activate() {
         placeholder-text-secondary
         @keydown.down.prevent="shift(1)"
         @keydown.up.prevent="shift(-1)"
+        @keydown.esc.prevent="input?.blur()"
         @keypress.enter="activate"
       >
       <button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">
diff --git a/pages/[[server]]/search.vue b/pages/[[server]]/search.vue
index befbe8d1..30602b36 100644
--- a/pages/[[server]]/search.vue
+++ b/pages/[[server]]/search.vue
@@ -1,18 +1,25 @@
 <script setup lang="ts">
+const keys = useMagicKeys()
 const { t } = useI18n()
+
 useHydratedHead({
   title: () => t('nav.search'),
 })
 
 const search = ref<{ input?: HTMLInputElement }>()
+
 watchEffect(() => {
   if (search.value?.input)
     search.value?.input?.focus()
 })
-onActivated(() =>
-  search.value?.input?.focus(),
-)
+onActivated(() => search.value?.input?.focus())
 onDeactivated(() => search.value?.input?.blur())
+
+watch(keys['/'], (v) => {
+  // focus on input when '/' is up to avoid '/' being typed
+  if (!v)
+    search.value?.input?.focus()
+})
 </script>
 
 <template>