* Done. The input now stops keyboard events from bubbling to the DropdownMenu, and explicitly maintains focus when the menu opens.
* Done. Arrow keys, Enter, Escape, and Tab now work for navigation while typing maintains focus in the input.
* Cleanup script changes for task attempt fff8d7a8-5b6d-4410-9bd6-71130db5b91c
* Done. The component now handles all keyboard navigation manually:
- Arrow keys move the highlight without moving cursor
- Enter selects the highlighted item
- Escape closes the dropdown
- Typing maintains focus and filters the list
- Highlighted items auto-scroll into view
* Cleanup script changes for task attempt fff8d7a8-5b6d-4410-9bd6-71130db5b91c
* Done. The BranchSelector is now optimized - only rows with changed props re-render, making arrow key navigation instant even with many branches.
* Done. I've added `transition-none` to the BranchRow items to disable CSS transitions.
**Findings:**
- No global transition rules with long durations found
- The DropdownMenuItem component (line 84 in [dropdown-menu.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/fff8-typing-in-the-br/frontend/src/components/ui/dropdown-menu.tsx#L84)) has `transition-colors` in its base styles
- This transition applies to background/color changes on focus/hover
The `transition-none` class I added should override this. Please test if the arrow key navigation is now instant. If it is, we've confirmed it was the CSS transitions causing the lag.
* Done. The BranchSelector now uses react-virtuoso to render only visible items. This will make navigation instant even with thousands of branches - only ~10-20 DOM nodes are rendered at any time instead of the full list.
* Done. Fixed both issues:
- Mouse hover no longer triggers scrolling (only keyboard navigation scrolls)
- Highlighted items now have a visible accent background with a subtle ring for clear visual feedback
* Cleanup script changes for task attempt fff8d7a8-5b6d-4410-9bd6-71130db5b91c
* Done. Increased the highlight background opacity to 70% and made the ring stronger (ring-2) for much clearer visibility.
* Cleanup script changes for task attempt fff8d7a8-5b6d-4410-9bd6-71130db5b91c
* Done. The list now only scrolls when the highlighted item would go out of view, not on every arrow key press.
* Cleanup script changes for task attempt fff8d7a8-5b6d-4410-9bd6-71130db5b91c
* Done! Cleanup complete. The component is now cleaner and more maintainable:
**Changes made:**
1. ✅ Removed data-attribute handlers, replaced with direct closures
2. ✅ Changed `onClick` to `onSelect` (more correct for Radix)
3. ✅ Removed redundant `key` prop, using `computeItemKey` instead
4. ✅ Fixed tooltip on disabled items (wrapped in span for pointer events)
5. ✅ Clear search/highlight when dropdown closes
6. ✅ Renamed `highlighted` → `highlightedIndex` for clarity
7. ✅ Factored out `isBranchDisabled` helper to reduce duplication
8. ✅ Removed redundant `autoFocus` on Input
The code is now simpler (-30 lines), more readable, and follows Radix best practices. Ready for PR!
* Cleanup script changes for task attempt fff8d7a8-5b6d-4410-9bd6-71130db5b91c
* Done! i18n implementation complete for all supported languages:
**Translations added:**
- English (en) ✅
- Spanish (es) ✅
- Japanese (ja) ✅
**Component updates:**
- Added `useTranslation(['common'])` hook
- New optional `disabledTooltip` prop for workflow-specific messages
- All hardcoded strings now use translation keys
- Placeholder defaults to translated value if not provided by parent
- Disabled tooltip defaults to generic message, but can be overridden
Parents (like RebaseDialog) can now provide workflow-specific tooltips from the `tasks` namespace while the component remains generic and reusable.
* Cleanup script changes for task attempt fff8d7a8-5b6d-4410-9bd6-71130db5b91c
* Done. Removed the `onOpenAutoFocus` handler. The component is now ready for PR.
* style
5b930d9a59