fix: improve keyboard operability especially on search page and editor (#2730)

Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>
This commit is contained in:
TAKAHASHI Shuuji 2024-04-01 14:24:42 +09:00 committed by GitHub
parent 587c063aba
commit eee671cdc3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 3 deletions

View file

@ -283,6 +283,7 @@ onDeactivated(() => {
flex max-w-full 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' : ''" :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="stopQuestionMarkPropagation"
@keydown.esc.prevent="editor?.commands.blur()"
/> />
</div> </div>

View file

@ -82,6 +82,7 @@ function activate() {
placeholder-text-secondary placeholder-text-secondary
@keydown.down.prevent="shift(1)" @keydown.down.prevent="shift(1)"
@keydown.up.prevent="shift(-1)" @keydown.up.prevent="shift(-1)"
@keydown.esc.prevent="input?.blur()"
@keypress.enter="activate" @keypress.enter="activate"
> >
<button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()"> <button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">

View file

@ -1,18 +1,25 @@
<script setup lang="ts"> <script setup lang="ts">
const keys = useMagicKeys()
const { t } = useI18n() const { t } = useI18n()
useHydratedHead({ useHydratedHead({
title: () => t('nav.search'), title: () => t('nav.search'),
}) })
const search = ref<{ input?: HTMLInputElement }>() const search = ref<{ input?: HTMLInputElement }>()
watchEffect(() => { watchEffect(() => {
if (search.value?.input) if (search.value?.input)
search.value?.input?.focus() search.value?.input?.focus()
}) })
onActivated(() => onActivated(() => search.value?.input?.focus())
search.value?.input?.focus(),
)
onDeactivated(() => search.value?.input?.blur()) 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> </script>
<template> <template>