Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
4 tasks done
loilo opened this issue Oct 17, 2024 · 1 comment
Closed
4 tasks done
Labels
bug: pending triage Maybe a bug, waiting for confirmation

Comments

@loilo
Copy link

loilo commented Oct 17, 2024

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:

vitepress-local.mp4

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:

algolia.mp4

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 loilo added the bug: pending triage Maybe a bug, waiting for confirmation label Oct 17, 2024
@brc-dd brc-dd closed this as completed in e638d85 Oct 17, 2024
@loilo
Copy link
Author

loilo commented Oct 17, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug: pending triage Maybe a bug, waiting for confirmation
Projects
None yet
Development

No branches or pull requests

1 participant