LinkDesk/frontend/docs/task-bulk-status-popover-close-fix.md

Task Bulk Status Popover Auto-Close Fix

Issue

When changing task status from bulk selected rows, the popover dropdown remained open after selecting a status, requiring manual dismissal.

Solution

Added controlled state management to the Popover component in the task columns definition:

Changes Made

File: frontend/src/components/task/columns.ts

1. Import ref from Vue

   • Added ref to the Vue imports to enable reactive state management

2. Restructured createColumns function

   • Changed from arrow function returning array to function with explicit return
   • This allows creating the ref outside column definitions

3. Added Popover State Control

   • Created isPopoverOpen ref outside column definitions (persists across renders)
   • Bound the ref to Popover's open prop and onUpdate:open event
   • Set isPopoverOpen.value = false after calling onBulkStatusChange

Implementation Details

export const createColumns = (callbacks?: ColumnCallbacks): ColumnDef<Task>[] => {
  // Create ref outside column definitions so it persists across renders
  const isPopoverOpen = ref(false)
  
  return [
    // ... column definitions
    {
      accessorKey: 'status',
      header: ({ column }) => {
        const selectedCount = callbacks?.getSelectedCount?.() || 0
        
        if (selectedCount > 0) {
          return h('div', { class: 'flex items-center gap-2' }, [
            // ... sort button
            h(Popover, {
              open: isPopoverOpen.value,
              'onUpdate:open': (value: boolean) => { isPopoverOpen.value = value }
            }, {
              // ... popover content with status buttons
              onClick: () => {
                callbacks?.onBulkStatusChange?.(status)
                isPopoverOpen.value = false  // Close popover after status change
              }
            })
          ])
        }
      }
    }
  ]
}

Key Point: The ref must be created outside the column definitions to persist across renders. Creating it inside the header function would cause it to reset on every render, preventing the popover from opening.

User Experience Improvement

• Popover now automatically closes after selecting a status
• Cleaner workflow - no need to click outside or press ESC
• Consistent with standard dropdown behavior
• Immediate visual feedback that the action was completed

Testing

1. Select multiple tasks using checkboxes
2. Click the dropdown button in the status column header
3. Select any status from the popover
4. Verify the popover closes automatically
5. Verify the status updates are applied to all selected tasks