vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
13.22k stars 2.13k forks source link

Local Search focuses entries by mouse pointer even if mouse never moves #4297

Closed loilo closed 1 month ago

loilo commented 1 month ago

Describe the bug

VitePress' Local Search has a built-in check to disable hovering search results using the mouse when the most recent interaction was keyboard navigation.

However, this protection does not go far enough to cover one other common scenario: The mouse cursor is also interacting with results that appear underneath it, if the search is opened with the ⌘K/Ctrl + K keyboard shortcut.

I think this problem is a lot easier to grasp with this short video, straight from a freshly initialized VitePress project with just the search added:

https://github.com/user-attachments/assets/05a6496a-bffe-4d24-9daf-34f82fbed18b

Note how the second result is immediately focused, without the cursor even appearing (since macOS hides it when starting to type.)

In contrast, this is how the Algolia search behaves:

https://github.com/user-attachments/assets/ff50900a-2b5d-4117-a407-712bd718b851

Here, the active result item only changes once the mouse is moved.

Reproduction

  1. Create a quickstart VitePress repo and add search to it. Here is one I made on StackBlitz: https://stackblitz.com/edit/vite-qbirgc?file=docs%2F.vitepress%2Fconfig.ts
  2. Open the search with the ⌘K/Ctrl + K keyboard shortcut.
  3. Type something to search, e.g. "vite"
  4. Move your mouse cursor over the second item.
  5. Close the search box using the Esc key.
  6. Re-open search using the shortcut. The second item will be focused immediately.

Expected behavior

Expectation in keyboard-only navigation of a classic combobox would be to have initial focus in (or near to) the input field and move focus from there.

System Info

System:
    OS: macOS 15.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 826.72 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.0.6 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 129.1.70.117
    Chrome: 129.0.6668.101
    Chrome Canary: 132.0.6781.0
    Edge: 129.0.2792.89
    Safari: 18.0.1
  npmPackages:
    vitepress: ^1.4.1 => 1.4.1

Additional context

I'd be happy to contribute a PR solving this issue.

Validations

loilo commented 1 month ago

That was quick — thank you @brc-dd! :)