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:
@@ -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 });
|
||||
}, []);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user