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

fix: override user-select:none on draggable media items to fix drag initiation

Browse source 
EditorInterface root div has select-none (user-select:none) applied globally
to prevent text selection during editing. Chrome/Safari refuse to start HTML5
drag-and-drop on elements that inherit user-select:none, which is why no
ghost image appeared, cursor never changed, and no dragstart events fired.

Fix: add select-text (user-select:text) to both draggable divs in
MediaThumbnail (list view and grid view). This overrides the inherited none
specifically on the elements that need to be dragged, without changing the
global UX behavior of the editor.
This commit is contained in:
Zac Gaetano 2026-05-19 14:45:47 -04:00
parent fd6693ee17
commit 5019563c38
1 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -249,7 +249,7 @@ const MediaThumbnail: React.FC<{
onDoubleClick={(e) => { e.stopPropagation(); onAddToTimeline(); }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className={`flex items-center gap-3 px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all group ${borderClass}`}
className={`select-text flex items-center gap-3 px-2 py-1.5 rounded-lg border-2 cursor-pointer transition-all group ${borderClass}`}
>
{/* Small thumbnail */}
<div className="w-12 h-8 rounded bg-background-tertiary relative overflow-hidden flex-shrink-0">
@ -400,7 +400,7 @@ const MediaThumbnail: React.FC<{
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
className={`aspect-video bg-background-tertiary rounded-lg border-2 relative group cursor-pointer transition-all overflow-hidden shadow-sm ${borderClass}`}
className={`select-text aspect-video bg-background-tertiary rounded-lg border-2 relative group cursor-pointer transition-all overflow-hidden shadow-sm ${borderClass}`}
>
{/* Thumbnail or placeholder */}
{item.thumbnailUrl ? (