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

Open browser dev tools
Navigate to shots page
Click on an assignment button
Check console for any errors
Inspect DOM to see if PopoverContent is rendered
Check if popover is hidden by CSS
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

🧪 Simple Popover Test