76 lines
2.6 KiB
Markdown
76 lines
2.6 KiB
Markdown
# 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
|