Skip to content

Conversation

roomote[bot]
Copy link

@roomote roomote bot commented Oct 11, 2025

Description

This PR fixes the issue where autocomplete items get automatically highlighted when the mouse cursor happens to be over them, even without any mouse movement. This was particularly problematic when users clicked into the input field to type, as the mouse would often be positioned over autocomplete items, causing unintended highlighting that interfered with keyboard navigation.

Problem

As reported in #8615, when the autocomplete menu opens and the mouse cursor happens to be over one of the items, it automatically highlights that entry instead of the topmost one - even if the mouse doesn't move. This breaks the expected behavior where pressing Enter should select the topmost result.

Solution

Implemented a smart hover detection system that distinguishes between:

  • Intentional hover: When the user actually moves their mouse (more than 5 pixels)
  • Incidental position: When the mouse just happens to be over an item without movement

Key Changes

  1. Added separate hoveredIndex and hasMouseMoved state tracking
  2. Implemented mouse movement detection with a 5-pixel threshold
  3. Hover styles only apply after actual mouse movement is detected
  4. Keyboard selection (with activeSelectionBackground) remains independent and takes precedence
  5. State resets when the menu opens/closes to ensure clean behavior

Behavior

  • Before: Items under the mouse cursor were immediately highlighted, interfering with keyboard navigation
  • After:
    • Items only show hover state after the mouse has moved at least 5 pixels
    • Keyboard navigation (arrow keys) works independently with clear visual selection
    • Clicking on items still works as expected

Testing

  • ✅ All existing tests pass
  • ✅ Manual testing confirms keyboard navigation works correctly
  • ✅ Mouse hover only activates after movement
  • ✅ Click selection still works as expected

Fixes #8615


Important

Fixes autocomplete hover issue in ContextMenu.tsx by tracking mouse movement to prevent interference with keyboard navigation.

  • Behavior:
    • Autocomplete items no longer highlight on incidental mouse hover in ContextMenu.tsx.
    • Hover state only activates after mouse moves more than 5 pixels.
    • Keyboard navigation remains unaffected and takes precedence over hover.
  • State Management:
    • Added hoveredIndex and hasMouseMoved state variables.
    • Implemented handleMouseMove to track mouse movement with a 5-pixel threshold.
    • State resets on menu open/close to ensure consistent behavior.
  • UI Changes:
    • Hover styles apply only after detecting actual mouse movement.
    • Maintains existing click functionality for selecting items.

This description was created by Ellipsis for 2a03b2b. You can customize this summary. It will automatically update as commits are pushed.

…navigation

- Added separate hover and selection states in ContextMenu
- Mouse position no longer automatically highlights items
- Mouse must move at least 5 pixels to activate hover highlighting
- Keyboard selection (highlighted with activeSelectionBackground) takes precedence
- Mouse hover shows subtle hover background only after movement
- Fixes #8615
@roomote roomote bot requested review from cte, jr and mrubens as code owners October 11, 2025 23:59
@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. bug Something isn't working labels Oct 11, 2025
@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Oct 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. size:M This PR changes 30-99 lines, ignoring generated files.

Projects

Status: Triage

Development

Successfully merging this pull request may close these issues.

[BUG] Accidentally leaving the mouse over autocomplete items highlights them

2 participants