fix: improve keyboard operability especially on search page and editor (#2730)
Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>zio/stable
parent
587c063aba
commit
eee671cdc3
|
@ -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>
|
||||
|
||||
|
|
|
@ -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()">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue