fix: move more-options button outside draggable div to fix click
- Button was inside draggable div — browser started drag instead of click - Button is now absolutely positioned outside the draggable div - Outer div has position:relative for correct button placement - Spacer span reserves space for the button in the layout - Works on all screen sizes (desktop, tablet, mobile)
This commit is contained in:
@@ -151,16 +151,10 @@ function FolderTreeItem({
|
|||||||
const isActive = selectedFilter === folderKey;
|
const isActive = selectedFilter === folderKey;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="relative">
|
||||||
<div
|
<div
|
||||||
draggable
|
draggable
|
||||||
onDragStart={(e) => {
|
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.setData('text/folder-id', node.id);
|
||||||
e.dataTransfer.effectAllowed = 'move';
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
}}
|
}}
|
||||||
@@ -168,7 +162,7 @@ function FolderTreeItem({
|
|||||||
onDragLeave={() => onDragLeave(node.id)}
|
onDragLeave={() => onDragLeave(node.id)}
|
||||||
onDrop={(e) => onDrop(e, node.id)}
|
onDrop={(e) => onDrop(e, node.id)}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'group flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
|
'group relative flex items-center gap-1.5 px-2 py-1.5 text-sm font-medium rounded-md cursor-pointer min-h-touch',
|
||||||
'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
||||||
isDragOver
|
isDragOver
|
||||||
? 'bg-primary-100 ring-2 ring-primary-400'
|
? 'bg-primary-100 ring-2 ring-primary-400'
|
||||||
@@ -188,19 +182,20 @@ function FolderTreeItem({
|
|||||||
{node.contact_count > 0 && (
|
{node.contact_count > 0 && (
|
||||||
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
|
<span className="text-xs text-secondary-400 tabular-nums">{node.contact_count}</span>
|
||||||
)}
|
)}
|
||||||
<button
|
{/* Spacer for the absolutely-positioned button */}
|
||||||
type="button"
|
<span className="w-7 h-7 flex-shrink-0" />
|
||||||
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-4 h-4')}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* More-options button — OUTSIDE the draggable div to prevent drag interference */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => { e.stopPropagation(); e.preventDefault(); onMoreClick(e, node.id); }}
|
||||||
|
className="absolute right-1 top-1/2 -translate-y-1/2 z-10 flex-shrink-0 text-secondary-400 hover:text-primary-600 p-1.5 rounded hover:bg-secondary-100 transition-colors touch-manipulation"
|
||||||
|
style={{ pointerEvents: 'auto' }}
|
||||||
|
title="Optionen"
|
||||||
|
aria-label="Optionen"
|
||||||
|
>
|
||||||
|
{icon(ICONS.more, 'w-4 h-4')}
|
||||||
|
</button>
|
||||||
|
|
||||||
{expanded && node.children.map((child) => (
|
{expanded && node.children.map((child) => (
|
||||||
<FolderTreeItem
|
<FolderTreeItem
|
||||||
|
|||||||
Reference in New Issue
Block a user