[Bug report]plugin-docsearch: Using the vue theme page will cause the search plugin to render repeatedly

[Zhengqbbb]

Bug report

I used the vuepress-docSearch plugin in my theme, but it seems to be rendered repeatedly as shown in the figure below. I am very surprised that such a thing will happen. If the page is rendered with markdown page, it will not happen, but if it is used with vue page, it will happen. .

Description

The plugin-docsearch plugin repeated rendering on my vue theme page.

Steps to reproduce

1. Use Search "Mac" on my homepage,
2. After the jump Search ”vscode"
3. After the jump Search ”Mac"

• Reproduction link / repo: https://www.qbenben.com/

Expected behavior

The plugin-docsearch plugin only render once

Screenshots

• render 4 time
• But it is normal to search only after refreshing the md page

Environment info

• Browser:

  System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 30.88 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.0 - /var/folders/p3/55bvbjg57lzb1d2b_mwbzykw0000gn/T/yarn--1641138157713-0.534447467104483/node
    Yarn: 1.22.4 - /var/folders/p3/55bvbjg57lzb1d2b_mwbzykw0000gn/T/yarn--1641138157713-0.534447467104483/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.22.0/bin/npm
  Utilities:
    Git: 2.30.1 - /usr/bin/git
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1
  npmPackages:
    @vuepress/bundler-vite:  2.0.0-beta.31 (2.0.0-beta.32)
    @vuepress/bundler-webpack:  2.0.0-beta.30
    @vuepress/cli:  2.0.0-beta.31 (2.0.0-beta.32)
    @vuepress/client:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/core:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/markdown:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-active-header-links:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-back-to-top:  2.0.0-beta.30 (2.0.0-beta.32)
    @vuepress/plugin-container:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-debug: Not Found
    @vuepress/plugin-docsearch: 2.0.0-beta.29 => 2.0.0-beta.29
    @vuepress/plugin-external-link-icon:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-git:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-google-analytics:  2.0.0-beta.29
    @vuepress/plugin-medium-zoom:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-nprogress:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-palette:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-prismjs:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.29 (2.0.0-beta.32)
    @vuepress/plugin-toc: Not Found
    @vuepress/shared:  2.0.0-beta.28 (2.0.0-beta.32)
    @vuepress/theme-default:  2.0.0-beta.31 (2.0.0-beta.32)
    @vuepress/utils:  2.0.0-beta.28 (2.0.0-beta.32)
    vue:  3.2.26
    vue-loader:  16.8.3
    vue-router:  4.0.12
    vuepress: ^2.0.0-beta.31 => 2.0.0-beta.32
    vuepress-vite: 2.0.0-beta.31 => 2.0.0-beta.31 (2.0.0-beta.32)
    vuepress-webpack: 2.0.0-beta.31 => 2.0.0-beta.31

[github-actions[bot]]

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 3 days.

[Zhengqbbb]

unmark

[Zhengqbbb]

After my testing, using the keyboard(like cmd+k) causes the search box to be rendered repeatedly,

but using the mouse works fine!!!

It is because if the additional vue page is jumping, the docSearch keydown triggers the binding of windows twice.

[Zhengqbbb]

reproduce

Adding Extra Pages making a RouterLink jump on other page will cause the search component to be destroyed and re-rendered, but the keyboard event bound to docSearch is not successfully destroyed, resulting in multiple search boxes being generated after the keyboard event is triggered.

• Of course, I also tried to handle the cancellation event in onBeforeUnmount. But the removeEventListener cannot be executed because the listener cannot be obtained.

What makes me wonder is why the extra page created with vue is different from the page generated with markdown: it doesn't seem to feel like a single page application.

[github-actions[bot]]

This issue is marked as stale because it has not had recent activity. Issues marked with stale will be closed if they have no activity within 3 days.

[Mister-Hope]

Try providing a minimal reproduction with @vuepress/theme-default, I will have a look later. @Zhengqbbb

[Mister-Hope]

I still can not reproduce it. The listener is added by docsearch, and I am not sure if there is a way to notice them to destory. You may give a little help here.

Also, if the extra pages are using the default layout, they won't have any problems, but if they are using a different layout, then that's expected.

[github-actions[bot]]

Hello @Zhengqbbb. Please provide a minimal reproduction using a GitHub repository or codesandbox. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[Mister-Hope]

Track https://github.com/algolia/docsearch/issues/1363

[Zhengqbbb]

Hi @Mister-Hope , sorry for the delay in minimizing the example. ❤️

github: https://github.com/Zhengqbbb/vuepress-test page: https://test.qbenben.com/

reproduce

In the following example, after I searched twice on

the home page, the box did not disappear. Can view video

1. Use shortcut keys. Command + k => Search Text : “doc”
2. Then, command + k => Search Text : “test”

https://user-images.githubusercontent.com/40693636/163668387-1797a20e-0c17-4431-89ad-68c3f78b1fc2.mp4

[Mister-Hope]

Sorry for forgetting noticeing you I made a repro on my site, I already open an issue to docsearch repo, and you can track that issue to see how we can solve it.