From 50d61faefacc3885efe99fe5477a3b815354a0c4 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 22 Oct 2023 15:05:41 +0530
Subject: [PATCH] fix(theme/search): prevent reactivity loss with i18n (#3121)

---
 .../components/VPAlgoliaSearchBox.vue            | 16 ++++++----------
 .../components/VPLocalSearchBox.vue              |  9 +++++++--
 .../components/VPNavBarSearchButton.vue          |  9 +++++++--
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/client/theme-default/components/VPAlgoliaSearchBox.vue b/src/client/theme-default/components/VPAlgoliaSearchBox.vue
index 046522950bb1..31bfd6450398 100644
--- a/src/client/theme-default/components/VPAlgoliaSearchBox.vue
+++ b/src/client/theme-default/components/VPAlgoliaSearchBox.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
 import docsearch from '@docsearch/js'
-import { onMounted, watch } from 'vue'
-import { useRouter, useRoute } from 'vitepress'
+import { useRoute, useRouter } from 'vitepress'
+import type { DefaultTheme } from 'vitepress/theme'
+import { nextTick, onMounted, watch } from 'vue'
 import { useData } from '../composables/data'
 
 const props = defineProps<{
@@ -18,7 +18,8 @@ type DocSearchProps = Parameters<typeof docsearch>[0]
 onMounted(update)
 watch(localeIndex, update)
 
-function update() {
+async function update() {
+  await nextTick()
   const options = {
     ...props.algolia,
     ...props.algolia.locales?.[localeIndex.value]
@@ -86,12 +87,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) {
 
 function getRelativePath(url: string) {
   const { pathname, hash } = new URL(url, location.origin)
-  return (
-    pathname.replace(
-      /\.html$/,
-      site.value.cleanUrls ? '' : '.html'
-    ) + hash
-  )
+  return pathname.replace(/\.html$/, site.value.cleanUrls ? '' : '.html') + hash
 }
 </script>
 
diff --git a/src/client/theme-default/components/VPLocalSearchBox.vue b/src/client/theme-default/components/VPLocalSearchBox.vue
index 1fde6c4d140f..d9df6a0a5d79 100644
--- a/src/client/theme-default/components/VPLocalSearchBox.vue
+++ b/src/client/theme-default/components/VPLocalSearchBox.vue
@@ -4,6 +4,7 @@ import {
   computedAsync,
   debouncedWatch,
   onKeyStroke,
+  reactify,
   useEventListener,
   useLocalStorage,
   useScrollLock,
@@ -12,7 +13,7 @@ import {
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 import Mark from 'mark.js/src/vanilla.js'
 import MiniSearch, { type SearchResult } from 'minisearch'
-import { inBrowser, useRouter, dataSymbol } from 'vitepress'
+import { dataSymbol, inBrowser, useRouter } from 'vitepress'
 import {
   computed,
   createApp,
@@ -22,6 +23,7 @@ import {
   onMounted,
   ref,
   shallowRef,
+  toRef,
   watch,
   watchEffect,
   type Ref
@@ -352,7 +354,10 @@ const defaultTranslations: { modal: ModalTranslations } = {
   }
 }
 
-const $t = createTranslate(theme.value.search?.options, defaultTranslations)
+const $t = reactify(createTranslate)(
+  toRef(() => theme.value.search?.options),
+  defaultTranslations
+)
 
 // Back
 
diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue
index 281a00f513d8..a53e5a0155a5 100644
--- a/src/client/theme-default/components/VPNavBarSearchButton.vue
+++ b/src/client/theme-default/components/VPNavBarSearchButton.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { reactify } from '@vueuse/core'
+import { toRef } from 'vue'
 import type { ButtonTranslations } from '../../../../types/local-search'
 import { useData } from '../composables/data'
 import { createTranslate } from '../support/translation'
@@ -9,11 +11,14 @@ const { theme } = useData()
 const defaultTranslations: { button: ButtonTranslations } = {
   button: {
     buttonText: 'Search',
-    buttonAriaLabel: 'Search',
+    buttonAriaLabel: 'Search'
   }
 }
 
-const $t = createTranslate(theme.value.search?.options, defaultTranslations)
+const $t = reactify(createTranslate)(
+  toRef(() => theme.value.search?.options),
+  defaultTranslations
+)
 </script>
 
 <template>