Context Menu Fix - Test Documentation

Issue Summary

Problem: Context menu was not showing when right-clicking on selected tasks.

Solution: Replaced DropdownMenu with Popover component.

Root Cause

Issue Description
Wrong Component DropdownMenu requires a trigger element and is designed for click-triggered dropdowns, not programmatic context menus
Positioning Conflict Manual fixed positioning conflicted with Radix UI's portal-based positioning
No Trigger DropdownMenu expects a DropdownMenuTrigger component, which we didn't have

Solution Details

Component Change

Before: DropdownMenu + DropdownMenuContent

After: Popover + PopoverAnchor + PopoverContent

How It Works

  1. User right-clicks on a table row
  2. Mouse coordinates are captured: { x: event.clientX, y: event.clientY }
  3. PopoverAnchor creates a 1px invisible element at cursor position
  4. PopoverContent appears relative to the anchor
  5. Popover handles viewport boundaries automatically

Test Steps

  1. Navigate to a project's Tasks view
  2. Select one or more tasks using the checkboxes in the first column
  3. Right-click on any selected task row
  4. ✓ Context menu should appear at cursor position
  5. Hover over "Set Status" menu item
  6. ✓ Submenu should appear with status options
  7. Click a status option
  8. ✓ Success toast should appear
  9. ✓ Menu should close
  10. ✓ Selection should clear
  11. ✓ Tasks should refresh with new status

Test Scenarios

Scenario Expected Behavior Status
Right-click on selected task Menu appears at cursor ✓ Fixed
Right-click on unselected task Task gets selected, menu appears ✓ Working
Right-click near screen edge Menu stays within viewport ✓ Auto-handled
Click outside menu Menu closes ✓ Working
Select status from submenu Tasks update, menu closes ✓ Working
Select assignee from submenu Tasks assigned, menu closes ✓ Working

Technical Changes

File Modified

frontend/src/components/task/TaskBulkActionsMenu.vue

Key Changes

Benefits

Verification Checklist

Related Documentation