fix: folder dropdown button not working — drag interference + button too small

- Button: draggable={false}, onMouseDown stopPropagation prevents drag swallow
- Button: larger (p-1.5, w-4 h-4), opacity-70, rounded hover bg
- Parent onDragStart: checks if target is Optionen button, prevents drag
- handleMoreClick: currentTarget fallback to closest('button')
- type='button' prevents accidental form submit
This commit is contained in:
Agent Zero
2026-07-27 15:58:48 +02:00
parent 81ff27b76a
commit 75505ab5bf
@@ -155,6 +155,12 @@ function FolderTreeItem({
<div
draggable
onDragStart={(e) => {
// Prevent drag when the click originated from the more-options button
const target = e.target as HTMLElement;
if (target.tagName === 'BUTTON' || target.closest('button[aria-label="Optionen"]')) {
e.preventDefault();
return;
}
e.dataTransfer.setData('text/folder-id', node.id);
e.dataTransfer.effectAllowed = 'move';
}}
@@ -183,12 +189,16 @@ function FolderTreeItem({
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
)}
<button
onClick={(e) => { e.stopPropagation(); onMoreClick(e, node.id); }}
className="opacity-60 group-hover:opacity-100 text-secondary-400 hover:text-primary-600 p-0.5"
type="button"
draggable={false}
onMouseDown={(e) => { e.stopPropagation(); }}
onDragStart={(e) => { e.preventDefault(); e.stopPropagation(); }}
onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
className="flex-shrink-0 opacity-70 group-hover:opacity-100 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-opacity touch-manipulation"
title="Optionen"
aria-label="Optionen"
>
{icon(ICONS.more, 'w-3.5 h-3.5')}
{icon(ICONS.more, 'w-4 h-4')}
</button>
</div>
@@ -243,7 +253,10 @@ export function ContactFolderTree({
const handleMoreClick = useCallback((e: React.MouseEvent, folderId: string) => {
e.preventDefault();
e.stopPropagation();
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
// Robust rect: prefer currentTarget, fallback to target.closest('button')
const btn = (e.currentTarget as HTMLElement) || ((e.target as HTMLElement)?.closest('button'));
if (!btn) return;
const rect = btn.getBoundingClientRect();
setDropdown({ folderId, anchorRect: rect });
}, []);