From 144a7d8e4ee483475b6956090c267213a1e2f8e1 Mon Sep 17 00:00:00 2001
From: ChuHoMan <74137084+ChuHoMan@users.noreply.github.com>
Date: Sun, 16 Apr 2023 21:59:48 +0800
Subject: [PATCH] fix(search): avoid body scroll when using local search
 (#2236)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 .../components/VPLocalSearchBox.vue           | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index 5458615f..d1f9a7d9 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -6,6 +6,7 @@ import {
   onKeyStroke,
   useEventListener,
   useLocalStorage,
+  useScrollLock,
   useSessionStorage
 } from '@vueuse/core'
 import Mark from 'mark.js'
@@ -16,6 +17,7 @@ import {
   createApp,
   markRaw,
   nextTick,
+  onBeforeUnmount,
   onMounted,
   ref,
   shallowRef,
@@ -36,8 +38,9 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const el = shallowRef<HTMLDivElement>()
-const resultsEl = shallowRef<HTMLDivElement>()
+const el = shallowRef<HTMLElement>()
+const resultsEl = shallowRef<HTMLElement>()
+const body = shallowRef<HTMLElement>()
 
 /* Search */
 
@@ -312,6 +315,20 @@ useEventListener('popstate', (event) => {
   emit('close')
 })
 
+/** Lock body */
+const isLocked = useScrollLock(body)
+
+onMounted(() => {
+  body.value = document.body
+  nextTick(() => {
+    isLocked.value = true
+  })
+})
+
+onBeforeUnmount(() => {
+  isLocked.value = false
+})
+
 function formMarkRegex(terms: Set<string>) {
   return new RegExp(
     [...terms]