fix: remove ContextMenuTrigger asChild from draggable elements to fix drag initiation
With asChild, Radix merges its pointer event handlers directly onto the
draggable div. This interferes with browser drag gesture initiation,
resulting in no ghost image and no drag events firing.
Fix: remove asChild so ContextMenuTrigger renders its own span (with
display:contents to preserve layout). Radix handlers now live on the
ancestor span, not the draggable div. Right-click still bubbles up to
trigger the context menu correctly.
Also add draggable={false} to <img> elements inside draggable divs
to prevent browser native image drag from competing with the parent.
This commit is contained in:
parent
18c4779f58
commit
fd6693ee17
1 changed files with 4 additions and 3 deletions
|
|
@ -240,7 +240,7 @@ const MediaThumbnail: React.FC<{
|
|||
if (viewMode === "list") {
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<ContextMenuTrigger style={{ display: 'contents' }}>
|
||||
<div
|
||||
draggable
|
||||
onDragStart={onDragStart}
|
||||
|
|
@ -254,7 +254,7 @@ const MediaThumbnail: React.FC<{
|
|||
{/* Small thumbnail */}
|
||||
<div className="w-12 h-8 rounded bg-background-tertiary relative overflow-hidden flex-shrink-0">
|
||||
{item.thumbnailUrl ? (
|
||||
<img src={item.thumbnailUrl} alt={item.name} className="w-full h-full object-cover" />
|
||||
<img src={item.thumbnailUrl} alt={item.name} className="w-full h-full object-cover" draggable={false} />
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Icon size={14} className={iconColor} />
|
||||
|
|
@ -386,7 +386,7 @@ const MediaThumbnail: React.FC<{
|
|||
|
||||
return (
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<ContextMenuTrigger style={{ display: 'contents' }}>
|
||||
<div className="flex flex-col">
|
||||
{/* Thumbnail container */}
|
||||
<div
|
||||
|
|
@ -408,6 +408,7 @@ const MediaThumbnail: React.FC<{
|
|||
src={item.thumbnailUrl}
|
||||
alt={item.name}
|
||||
className="w-full h-full object-cover"
|
||||
draggable={false}
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-background-tertiary">
|
||||
|
|
|
|||
Loading…
Reference in a new issue