9
9
useScrollLock ,
10
10
useSessionStorage
11
11
} from ' @vueuse/core'
12
+ import { useFocusTrap } from ' @vueuse/integrations/useFocusTrap'
12
13
import Mark from ' mark.js/src/vanilla.js'
13
14
import MiniSearch , { type SearchResult } from ' minisearch'
14
15
import { useRouter } from ' vitepress'
@@ -26,11 +27,11 @@ import {
26
27
type Ref
27
28
} from ' vue'
28
29
import type { ModalTranslations } from ' ../../../../types/local-search'
30
+ import { dataSymbol } from ' ../../app/data'
29
31
import { pathToFile } from ' ../../app/utils'
30
32
import { slash } from ' ../../shared'
31
33
import { useData } from ' ../composables/data'
32
34
import { createTranslate } from ' ../support/translation'
33
- import { dataSymbol } from ' ../../app/data'
34
35
35
36
defineProps <{
36
37
placeholder: string
@@ -64,6 +65,12 @@ interface Result {
64
65
}
65
66
66
67
const vitePressData = useData ()
68
+ const { activate } = useFocusTrap (el , {
69
+ immediate: true ,
70
+ allowOutsideClick: true ,
71
+ clickOutsideDeactivates: true ,
72
+ escapeDeactivates: true
73
+ })
67
74
const { localeIndex, theme } = vitePressData
68
75
const searchIndex = computedAsync (async () =>
69
76
markRaw (
@@ -84,14 +91,14 @@ const searchIndex = computedAsync(async () =>
84
91
85
92
const disableQueryPersistence = computed (() => {
86
93
return (
87
- theme .value .search ?.provider === ' local' &&
88
- theme .value .search .options ?.disableQueryPersistence === true
94
+ theme .value .search ?.provider === ' local' &&
95
+ theme .value .search .options ?.disableQueryPersistence === true
89
96
)
90
97
})
91
98
92
99
const filterText = disableQueryPersistence .value
93
- ? ref (' ' )
94
- : useSessionStorage (' vitepress:local-search-filter' , ' ' )
100
+ ? ref (' ' )
101
+ : useSessionStorage (' vitepress:local-search-filter' , ' ' )
95
102
96
103
const showDetailedList = useLocalStorage (
97
104
' vitepress:local-search-detailed-list' ,
@@ -334,6 +341,7 @@ onMounted(() => {
334
341
body .value = document .body
335
342
nextTick (() => {
336
343
isLocked .value = true
344
+ nextTick ().then (() => activate ())
337
345
})
338
346
})
339
347
@@ -474,6 +482,7 @@ function formMarkRegex(terms: Set<string>) {
474
482
}"
475
483
:aria-label =" [...p.titles, p.title].join(' > ')"
476
484
@mouseenter =" !disableMouseOver && (selectedIndex = index)"
485
+ @focusin =" selectedIndex = index"
477
486
@click =" $emit('close')"
478
487
>
479
488
<div >
@@ -498,7 +507,7 @@ function formMarkRegex(terms: Set<string>) {
498
507
</div >
499
508
500
509
<div v-if =" showDetailedList" class =" excerpt-wrapper" >
501
- <div v-if =" p.text" class =" excerpt" >
510
+ <div v-if =" p.text" class =" excerpt" inert >
502
511
<div class =" vp-doc" v-html =" p.text" />
503
512
</div >
504
513
<div class =" excerpt-gradient-bottom" />
@@ -727,6 +736,7 @@ function formMarkRegex(terms: Set<string>) {
727
736
transition : none ;
728
737
line-height : 1rem ;
729
738
border : solid 2px var (--vp-local-search-result-border );
739
+ outline : none ;
730
740
}
731
741
732
742
.result > div {
0 commit comments