253 lines
9.3 KiB
HTML
253 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple Popover Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.test-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.test-title {
|
|
color: #333;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.test-section {
|
|
margin-bottom: 30px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.test-step {
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
.success {
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
.error {
|
|
color: #dc3545;
|
|
font-weight: bold;
|
|
}
|
|
.warning {
|
|
color: #ffc107;
|
|
font-weight: bold;
|
|
}
|
|
.info {
|
|
color: #17a2b8;
|
|
font-weight: bold;
|
|
}
|
|
.code {
|
|
background-color: #f1f1f1;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1 class="test-title">🧪 Simple Popover Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Test Purpose</h2>
|
|
<p>This test helps diagnose why the assignment popover is not showing by creating a minimal test case.</p>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔍 Debugging Steps</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>1. Check Popover Component Import</h3>
|
|
<p>Verify that the Popover components are properly imported:</p>
|
|
<ul>
|
|
<li><code>import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'</code></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>2. Check Button Event Handling</h3>
|
|
<p>The issue might be with event handling in the data table. Try:</p>
|
|
<ul>
|
|
<li>Remove <code>@click.stop</code> from the button</li>
|
|
<li>Let the Popover handle opening/closing naturally</li>
|
|
<li>Use watchers to load data when popover opens</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>3. Check CSS/Z-Index Issues</h3>
|
|
<p>The popover might be rendered but hidden behind other elements:</p>
|
|
<ul>
|
|
<li>Inspect the DOM to see if PopoverContent is rendered</li>
|
|
<li>Check CSS z-index values</li>
|
|
<li>Look for <code>overflow: hidden</code> on parent containers</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>4. Test with Simple Popover</h3>
|
|
<p>Create a minimal popover test in the same context:</p>
|
|
<pre><code><Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button>Test</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<div>Hello World</div>
|
|
</PopoverContent>
|
|
</Popover></code></pre>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>5. Check Table Row Event Handling</h3>
|
|
<p>The table row might be preventing the popover from opening:</p>
|
|
<ul>
|
|
<li>Check if table row has click handlers that prevent bubbling</li>
|
|
<li>Try adding <code>@click.stop</code> to the popover trigger</li>
|
|
<li>Test outside of the table context</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🔧 Potential Fixes</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>Fix 1: Remove Custom Click Handler</h3>
|
|
<p>Let the Popover component handle opening/closing naturally:</p>
|
|
<pre><code><PopoverTrigger as-child>
|
|
<Button variant="ghost" size="sm">
|
|
<User class="h-3 w-3" />
|
|
</Button>
|
|
</PopoverTrigger></code></pre>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Fix 2: Use Watcher for Data Loading</h3>
|
|
<p>Load project members when popover opens:</p>
|
|
<pre><code>watch(isAssignmentPopoverOpen, (isOpen) => {
|
|
if (isOpen && projectMembers.value.length === 0) {
|
|
loadProjectMembers()
|
|
}
|
|
})</code></pre>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Fix 3: Add Event Prevention</h3>
|
|
<p>Prevent table row events from interfering:</p>
|
|
<pre><code><div @click.stop>
|
|
<Popover>...</Popover>
|
|
</div></code></pre>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Fix 4: Check Portal/Teleport</h3>
|
|
<p>Ensure popover content is rendered in the correct location:</p>
|
|
<ul>
|
|
<li>Check if PopoverContent uses portal/teleport</li>
|
|
<li>Verify it's not being clipped by parent containers</li>
|
|
<li>Try adding <code>side="bottom"</code> and <code>align="start"</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🧪 Manual Testing</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>Test Steps</h3>
|
|
<ol>
|
|
<li>Open browser dev tools</li>
|
|
<li>Navigate to shots page</li>
|
|
<li>Click on an assignment button</li>
|
|
<li>Check console for any errors</li>
|
|
<li>Inspect DOM to see if PopoverContent is rendered</li>
|
|
<li>Check if popover is hidden by CSS</li>
|
|
<li>Try clicking outside table context</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>What to Look For</h3>
|
|
<ul>
|
|
<li><span class="success">✓ PopoverContent element in DOM</span></li>
|
|
<li><span class="success">✓ Console logs showing popover state changes</span></li>
|
|
<li><span class="success">✓ No JavaScript errors</span></li>
|
|
<li><span class="error">✗ PopoverContent missing from DOM</span></li>
|
|
<li><span class="error">✗ CSS hiding the popover</span></li>
|
|
<li><span class="error">✗ Event handlers preventing popover</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📊 Expected vs Actual</h2>
|
|
|
|
<div class="test-step">
|
|
<h3>Expected Behavior</h3>
|
|
<ul>
|
|
<li>Click button → Popover opens immediately</li>
|
|
<li>PopoverContent appears below/beside button</li>
|
|
<li>Loading spinner shows while fetching members</li>
|
|
<li>Member list appears with names and avatars</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-step">
|
|
<h3>Actual Behavior (Current Issue)</h3>
|
|
<ul>
|
|
<li>Click button → Nothing happens</li>
|
|
<li>No popover appears</li>
|
|
<li>No visual feedback</li>
|
|
<li>Console may show logs but no popover</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('🧪 Simple Popover Test loaded');
|
|
console.log('📋 Follow the debugging steps to identify the popover issue');
|
|
|
|
// Helper functions for debugging
|
|
window.popoverDebug = {
|
|
checkPopovers: () => {
|
|
const popovers = document.querySelectorAll('[data-radix-popper-content-wrapper]');
|
|
console.log(`Found ${popovers.length} popover content wrappers`);
|
|
return popovers;
|
|
},
|
|
|
|
checkButtons: () => {
|
|
const buttons = document.querySelectorAll('[data-testid="editable-task-status"] button');
|
|
console.log(`Found ${buttons.length} assignment buttons`);
|
|
return buttons;
|
|
},
|
|
|
|
checkEvents: () => {
|
|
console.log('🔍 Check if table row events are preventing popover opening');
|
|
console.log('🔍 Look for click handlers on parent elements');
|
|
}
|
|
};
|
|
|
|
console.log('🛠️ Debug helpers available: window.popoverDebug');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |