# Simple Popover Test

# 🧪 Simple Popover Test

## 🎯 Test Purpose

This test helps diagnose why the assignment popover is not showing by creating a minimal test case.

## 🔍 Debugging Steps

### 1. Check Popover Component Import

Verify that the Popover components are properly imported:

- `import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'`

### 2. Check Button Event Handling

The issue might be with event handling in the data table. Try:

- Remove `@click.stop` from the button
- Let the Popover handle opening/closing naturally
- Use watchers to load data when popover opens

### 3. Check CSS/Z-Index Issues

The popover might be rendered but hidden behind other elements:

- Inspect the DOM to see if PopoverContent is rendered
- Check CSS z-index values
- Look for `overflow: hidden` on parent containers

### 4. Test with Simple Popover

Create a minimal popover test in the same context:

    <Popover>
      <PopoverTrigger as-child>
        <Button>Test</Button>
      </PopoverTrigger>
      <PopoverContent>
        <div>Hello World</div>
      </PopoverContent>
    </Popover>

### 5. Check Table Row Event Handling

The table row might be preventing the popover from opening:

- Check if table row has click handlers that prevent bubbling
- Try adding `@click.stop` to the popover trigger
- Test outside of the table context

## 🔧 Potential Fixes

### Fix 1: Remove Custom Click Handler

Let the Popover component handle opening/closing naturally:

    <PopoverTrigger as-child>
      <Button variant="ghost" size="sm">
        <User class="h-3 w-3" />
      </Button>
    </PopoverTrigger>

### Fix 2: Use Watcher for Data Loading

Load project members when popover opens:

    watch(isAssignmentPopoverOpen, (isOpen) => {
      if (isOpen && projectMembers.value.length === 0) {
        loadProjectMembers()
      }
    })

### Fix 3: Add Event Prevention

Prevent table row events from interfering:

    <div @click.stop>
      <Popover>...</Popover>
    </div>

### Fix 4: Check Portal/Teleport

Ensure popover content is rendered in the correct location:

- Check if PopoverContent uses portal/teleport
- Verify it's not being clipped by parent containers
- Try adding `side="bottom"` and `align="start"`

## 🧪 Manual Testing

### Test Steps

1. Open browser dev tools
2. Navigate to shots page
3. Click on an assignment button
4. Check console for any errors
5. Inspect DOM to see if PopoverContent is rendered
6. Check if popover is hidden by CSS
7. Try clicking outside table context

### What to Look For

- ✓ PopoverContent element in DOM
- ✓ Console logs showing popover state changes
- ✓ No JavaScript errors
- ✗ PopoverContent missing from DOM
- ✗ CSS hiding the popover
- ✗ Event handlers preventing popover

## 📊 Expected vs Actual

### Expected Behavior

- Click button → Popover opens immediately
- PopoverContent appears below/beside button
- Loading spinner shows while fetching members
- Member list appears with names and avatars

### Actual Behavior (Current Issue)

- Click button → Nothing happens
- No popover appears
- No visual feedback
- Console may show logs but no popover