Commit Graph

2 Commits

Author SHA1 Message Date
Louis Knight-Webb
6cb45f54c1 Fix search input losing focus when hovering over dropdown items (Vibe Kanban) (#1966)
* Done! Here's a summary of the changes:

## Changes Made

### 1. `Dropdown.tsx` (lines 140-190)
- Added `preventFocusOnHover?: boolean` prop to `DropdownMenuItemProps` interface
- Added `onPointerMove` handler that calls `e.preventDefault()` when `preventFocusOnHover` is true, which stops Radix from stealing focus on hover

### 2. `SearchableDropdown.tsx` (line 110)
- Added `preventFocusOnHover` prop to `DropdownMenuItem`

### 3. `ProjectSelectorContainer.tsx` (lines 181, 208)
- Added `preventFocusOnHover` prop to both `DropdownMenuItem` components (the "Create new project" button and the virtualized project items)

The fix uses `e.preventDefault()` on `onPointerMove` to disable Radix's hover-to-focus behavior, as documented in [Radix UI Issue #2193](https://github.com/radix-ui/primitives/issues/2193). This preserves all other functionality (click, keyboard navigation, selection) while allowing the search input to retain focus when hovering over items.

* Done! I've added the `onPointerLeave` handler to `DropdownMenuItem` alongside the existing `onPointerMove` handler. Both now call `e.preventDefault()` when `preventFocusOnHover` is true.

**Summary of the fix:**
- Added `onPointerLeave` destructuring from props (line 161)
- Added `onPointerLeave` handler that calls `e.preventDefault()` when `preventFocusOnHover` is true (lines 187-194)

Per the [Radix UI Issue #2193](https://github.com/radix-ui/primitives/issues/2193), **both** `onPointerMove` and `onPointerLeave` need `preventDefault()` to fully disable hover-to-focus behavior.
2026-01-12 15:16:33 +00:00
Louis Knight-Webb
527febdc52 Workspaces FE (#1733) 2026-01-08 22:14:38 +00:00