Skip to content

Commit 997d2c3

Browse files
authored
fix: CSV drag and drop (supabase#42656)
## Problem Drag-and-drop CSV import functionality is broken in the Table Editor when tables are empty. The `pointer-events-none` CSS class on the empty state overlay blocks all pointer events, including drag events, preventing users from dropping CSV files onto empty tables. ## Solution Move drag event handlers (`onDragOver`, `onDragLeave`, `onDrop`) from the inner overlay div to the parent container div. This allows: - Drag events to be captured by the parent container - The overlay to retain `pointer-events-none` for proper horizontal scrolling - (as intended in supabase#42618) - Interactive elements inside to use `pointer-events-auto` This follows the existing pattern used in `FileExplorerColumn.tsx` where drag handlers are on the parent container while visual overlays have `pointer-events-none`. ## Related - Closes supabase#42655 - Extends supabase#42618 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved drag-and-drop event detection scope in the grid component. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent a0b946f commit 997d2c3

1 file changed

Lines changed: 3 additions & 3 deletions

File tree

  • apps/studio/components/grid/components/grid

apps/studio/components/grid/components/grid/Grid.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,9 @@ export const Grid = memo(
232232
<div
233233
className={cn('flex flex-col relative transition-colors', containerClass)}
234234
style={{ width: width || '100%', height: height || '50vh' }}
235+
onDragOver={onDragOver}
236+
onDragLeave={onDragOver}
237+
onDrop={onFileDrop}
235238
>
236239
{/* Render no rows fallback outside of the DataGrid */}
237240
{(rows ?? []).length === 0 && (
@@ -241,9 +244,6 @@ export const Grid = memo(
241244
isTableEmpty && isDraggedOver && 'border-2 border-dashed',
242245
isValidFileDraggedOver ? 'border-brand-600' : 'border-destructive-600'
243246
)}
244-
onDragOver={onDragOver}
245-
onDragLeave={onDragOver}
246-
onDrop={onFileDrop}
247247
>
248248
{isLoading && !isDisabled && (
249249
<GenericSkeletonLoader className="w-full top-9 absolute p-2" />

0 commit comments

Comments
 (0)