Shot Delete Detail Panel Fix - Test Guide
This document outlines the test cases to verify that the shot detail panel no longer opens when performing delete actions.
Problem Description
Previously, when clicking "Delete Shot" from the dropdown menu in the shots table, the shot detail panel would incorrectly open, causing confusion for users.
Solution Implemented
Added multiple layers of protection to prevent the detail panel from opening during delete operations:
1. Enhanced event handling in ShotsDataTable.vue handleRowClick method
2. Added dialog state checks in ShotBrowser.vue handleRowClick and handleRowDoubleClick
3. Added dropdown menu state detection
4. Comprehensive event propagation prevention in dropdown menu items
Test Cases
Test Case 1: Delete from Dropdown Menu
Steps:
- Navigate to a project's shots view
- Click the three-dot menu (⋯) on any shot row
- Click "Delete Shot" from the dropdown menu
Expected Result:
- ✅ Delete confirmation dialog opens
- ✅ Shot detail panel does NOT open
- ✅ No unwanted navigation or panel changes
Test Case 2: Edit from Dropdown Menu
Steps:
- Click the three-dot menu (⋯) on any shot row
- Click "Edit Shot" from the dropdown menu
Expected Result:
- ✅ Edit dialog opens
- ✅ Shot detail panel does NOT open
Test Case 3: View Tasks from Dropdown Menu
Steps:
- Click the three-dot menu (⋯) on any shot row
- Click "View Tasks" from the dropdown menu
Expected Result:
- ✅ Shot detail panel opens (this is intended behavior)
Test Case 4: Row Click (Normal Behavior)
Steps:
- Click on an empty area of a shot row (not on buttons or interactive elements)
Expected Result:
- ✅ Row selection changes (if applicable)
- ✅ Shot detail panel does NOT open (single click should not open panel)
Test Case 5: Row Double Click
Steps:
- Double-click on an empty area of a shot row
Expected Result:
- ✅ Shot detail panel opens (this is intended behavior)
Test Case 6: Delete Dialog Interaction
Steps:
- Open delete dialog for a shot
- Try clicking on other shot rows while dialog is open
- Cancel or complete the delete operation
Expected Result:
- ✅ No row clicks are processed while dialog is open
- ✅ Detail panel does not open during dialog interaction
Key Fixes Applied
1. Dialog State Checks:
// Don't handle row clicks if any dialog is open
if (showDeleteDialog.value || showCreateDialog.value ||
showBulkCreateDialog.value || showEditDialog.value) {
return
}
2. Dropdown Menu State Detection:
// If any dropdown is open, don't handle row clicks
const openDropdown = document.querySelector(
'[data-radix-dropdown-menu-content][data-state="open"]'
)
if (openDropdown) {
return
}
3. Enhanced Event Propagation Prevention:
onClick: (e: Event) => {
e.stopPropagation()
e.preventDefault()
meta.onDelete(shot)
}
Verification Checklist
- □ Delete action opens only the delete dialog
- □ Edit action opens only the edit dialog
- □ View Tasks action opens the detail panel (intended)
- □ Single row click does not open detail panel
- □ Double row click opens detail panel (intended)
- □ No unwanted panel opening during any dropdown interactions
Note: If any test case fails, check the browser console for JavaScript errors and verify that all event handlers are properly preventing propagation.