WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

fix: remove ContextMenuTrigger asChild from draggable elements to fix drag initiation

Browse source 
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:
Zac Gaetano 2026-05-19 13:00:09 -04:00
parent 18c4779f58
commit fd6693ee17
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
services/editor/apps/web/src/components/editor/AssetsPanel.tsx
View file

@ -240,7 +240,7 @@ const MediaThumbnail: React.FC<{
if (viewMode === "list") { if (viewMode === "list") {
return ( return (
<ContextMenu> <ContextMenu>
<ContextMenuTrigger asChild> <ContextMenuTrigger style={{ display: 'contents' }}>
<div <div
draggable draggable
onDragStart={onDragStart} onDragStart={onDragStart}
@ -254,7 +254,7 @@ const MediaThumbnail: React.FC<{
{/* Small thumbnail */} {/* Small thumbnail */}
<div className="w-12 h-8 rounded bg-background-tertiary relative overflow-hidden flex-shrink-0"> <div className="w-12 h-8 rounded bg-background-tertiary relative overflow-hidden flex-shrink-0">
{item.thumbnailUrl ? ( {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"> <div className="w-full h-full flex items-center justify-center">
<Icon size={14} className={iconColor} /> <Icon size={14} className={iconColor} />
@ -386,7 +386,7 @@ const MediaThumbnail: React.FC<{
return ( return (
<ContextMenu> <ContextMenu>
<ContextMenuTrigger asChild> <ContextMenuTrigger style={{ display: 'contents' }}>
<div className="flex flex-col"> <div className="flex flex-col">
{/* Thumbnail container */} {/* Thumbnail container */}
<div <div
@ -408,6 +408,7 @@ const MediaThumbnail: React.FC<{
src={item.thumbnailUrl} src={item.thumbnailUrl}
alt={item.name} alt={item.name}
className="w-full h-full object-cover" className="w-full h-full object-cover"
draggable={false}
/> />
) : ( ) : (
<div className="absolute inset-0 flex items-center justify-center bg-background-tertiary"> <div className="absolute inset-0 flex items-center justify-center bg-background-tertiary">