indigo/LinkDesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init Repo

Browse Source
This commit is contained in:
indigo
2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/test-simple-popover.html
+253
View File
@@ -0,0 +1,253 @@
<!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>&lt;Popover&gt;
&lt;PopoverTrigger as-child&gt;
&lt;Button&gt;Test&lt;/Button&gt;
&lt;/PopoverTrigger&gt;
&lt;PopoverContent&gt;
&lt;div&gt;Hello World&lt;/div&gt;
&lt;/PopoverContent&gt;
&lt;/Popover&gt;</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>&lt;PopoverTrigger as-child&gt;
&lt;Button variant="ghost" size="sm"&gt;
&lt;User class="h-3 w-3" /&gt;
&lt;/Button&gt;
&lt;/PopoverTrigger&gt;</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>&lt;div @click.stop&gt;
&lt;Popover&gt;...&lt;/Popover&gt;
&lt;/div&gt;</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>