fix: failed to update search index after switching lang (#1950)

Author: chenjiahan

e2e/fixtures/search-i18n/doc/en/index.md

@@ -0,0 +1,3 @@
+# Index
+
+## Button en

e2e/fixtures/search-i18n/doc/zh/index.md

@@ -0,0 +1,3 @@
+# 首页
+
+## Button 中文

e2e/fixtures/search-i18n/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@rspress-fixture/search-i18n",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rspress build",
+    "dev": "rspress dev",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "rspress": "workspace:*"
+  }
+}

e2e/fixtures/search-i18n/rspress.config.ts

@@ -0,0 +1,19 @@
+import * as path from 'node:path';
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  lang: 'en',
+  themeConfig: {
+    locales: [
+      {
+        lang: 'zh',
+        label: '简体中文',
+      },
+      {
+        lang: 'en',
+        label: 'English',
+      },
+    ],
+  },
+});

e2e/tests/search-i18n.test.ts

@@ -0,0 +1,50 @@
+import path from 'node:path';
+import { expect, test } from '@playwright/test';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+import { searchInPage } from '../utils/search';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('search i18n test', async () => {
+  let appPort;
+  let app;
+
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'search-i18n');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('should update search index when language changed', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`);
+
+    const suggestItems1 = await searchInPage(page, 'Button');
+    expect(await suggestItems1[0].textContent()).toContain('Button en');
+
+    // close the search modal
+    await page.click('body');
+
+    // Switch language to Chinese
+    await page.click('.rspress-nav-menu-group-button');
+    await page.click('.rspress-nav-menu-group-content a');
+    await page.waitForLoadState();
+
+    const suggestItems2 = await searchInPage(page, 'Button');
+    expect(await suggestItems2[0].textContent()).toContain('Button 中文');
+    await page.click('body');
+
+    // Switch language to English
+    await page.click('.rspress-nav-menu-group-button');
+    await page.click('.rspress-nav-menu-group-content a');
+    await page.waitForLoadState();
+
+    const suggestItems3 = await searchInPage(page, 'Button');
+    expect(await suggestItems3[0].textContent()).toContain('Button en');
+  });
+});

packages/theme-default/src/components/Search/SearchPanel.tsx

@@ -296,10 +296,6 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
 
   // init pageSearcher again when lang or version changed
   useEffect(() => {
-    if (initStatus === 'initial') {
-      return;
-    }
-
     const { currentLang, currentVersion } = pageSearcherConfigRef.current ?? {};
     const isLangChanged = lang !== currentLang;
     const isVersionChanged = versionedSearch && version !== currentVersion;
@@ -308,7 +304,8 @@ export function SearchPanel({ focused, setFocused }: SearchPanelProps) {
       // reset status first
       setInitStatus('initial');
       pageSearcherRef.current = null;
-      initSearch();
+      const searcher = createSearcher();
+      searcher.fetchSearchIndex();
     }
   }, [lang, version, versionedSearch]);