Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,75 @@
+# 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
+
+```typescript
+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