🔧 Simple Popover Fix

🎯 Identified Issue

The problem might be with the v-model:open binding on the Popover component. Let's test different approaches.

🔍 Analysis

Current Implementation (Not Working)

<Popover v-model:open="isAssignmentPopoverOpen"> <PopoverTrigger as-child> <Button>...</Button> </PopoverTrigger> <PopoverContent>...</PopoverContent> </Popover>

Issue: The v-model:open might be preventing the popover from opening naturally.

Working Example (DatePicker)

<Popover> <PopoverTrigger as-child> <Button>...</Button> </PopoverTrigger> <PopoverContent>...</PopoverContent> </Popover>

Works: No v-model:open binding, lets Popover manage its own state.

🛠️ Proposed Fix

Option 1: Remove v-model:open (Recommended)

Let the Popover component manage its own open/close state naturally.

<!-- Remove v-model:open binding --> <Popover> <PopoverTrigger as-child> <Button>...</Button> </PopoverTrigger> <PopoverContent>...</PopoverContent> </Popover>

Pros: Simple, follows working examples, less state management

Cons: Can't programmatically control popover state

Option 2: Use @update:open event

Listen for state changes instead of binding with v-model.

<Popover @update:open="handlePopoverStateChange"> <PopoverTrigger as-child> <Button>...</Button> </PopoverTrigger> <PopoverContent>...</PopoverContent> </Popover>

Pros: Can still track state changes

Note: Need to implement handlePopoverStateChange method

Option 3: Check reka-ui version compatibility

The v-model:open might not be supported in the current reka-ui version.

// Check package.json for reka-ui version // Verify if v-model:open is supported

🚀 Implementation Steps

Step 1: Try Option 1 (Quick Fix)

  1. Remove v-model:open="isAssignmentPopoverOpen" from Popover
  2. Remove isAssignmentPopoverOpen ref if not used elsewhere
  3. Remove the watcher for isAssignmentPopoverOpen
  4. Test if popover opens when clicking the button

Step 2: Adjust Member Loading

Since we can't watch for popover state, load members on button click or component mount:

// Option A: Load on component mount (current preload strategy) onMounted(() => { loadProjectMembers() }) // Option B: Load on button click <PopoverTrigger as-child> <Button @click="loadProjectMembers">...</Button> </PopoverTrigger>

Step 3: Handle Popover Closing

For closing popover after assignment, we can:

// Use a ref to the popover and close it programmatically // Or rely on natural popover behavior (clicking outside closes it)

🧪 Testing Plan

Test Scenario 1: Basic Popover Opening

  1. Navigate to shots table
  2. Click assignment button
  3. Verify popover opens
  4. Verify popover content is visible

Test Scenario 2: Member Loading

  1. Open popover
  2. Verify debug info shows project ID
  3. Verify members list loads
  4. Check console for loading messages

Test Scenario 3: Assignment Functionality

  1. Click on a member in the list
  2. Verify assignment API call is made
  3. Verify popover closes (if implemented)
  4. Verify button shows assigned user avatar

📝 Code Changes Needed

EditableTaskStatus.vue Changes

// REMOVE these lines: const isAssignmentPopoverOpen = ref(false) watch(isAssignmentPopoverOpen, (isOpen) => { // ... watcher code }) // CHANGE this: <Popover v-model:open="isAssignmentPopoverOpen"> // TO this: <Popover> // OPTIONAL: Add click handler to trigger for member loading <PopoverTrigger as-child> <Button @click="ensureMembersLoaded">...</Button> </PopoverTrigger>