# Simple Popover Fix Test

# 🔧 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>