From e3fa63962f1e7893537a6b2faa3392ad5f909545 Mon Sep 17 00:00:00 2001 From: Karoline Tufte Lien Date: Thu, 23 Apr 2026 10:47:05 +0200 Subject: [PATCH] fix: prevent globe drag image on macOS Chrome when resizing data table The empty 1x1 drag image was created and assigned a src inside dragstart, so it was still loading when setDragImage ran. When the supplied image isn't yet `complete`, macOS Chrome falls back to a globe icon as the drag image. Pre-load the image at module scope and guard setDragImage on `.complete` so the real (transparent) image is used. The previous evt.preventDefault() in the dragover handler was orthogonal (it controls drop-acceptance, not the drag image) and is removed. Refs: https://www.sam.today/blog/html5-dnd-globe-icon Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/datatable/ResizeHandle.jsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/datatable/ResizeHandle.jsx b/src/components/datatable/ResizeHandle.jsx index 18a085b82..6aa190253 100644 --- a/src/components/datatable/ResizeHandle.jsx +++ b/src/components/datatable/ResizeHandle.jsx @@ -3,6 +3,13 @@ import React from 'react' import { IconDrag } from '../core/icons.jsx' import styles from './styles/ResizeHandle.module.css' +// Pre-decoded so setDragImage doesn't fall back to the macOS Chrome globe icon +// when the image isn't yet `complete` on the dragstart tick. +// https://www.sam.today/blog/html5-dnd-globe-icon +const EMPTY_DRAG_IMAGE = new Image(1, 1) +EMPTY_DRAG_IMAGE.src = + 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' + const ResizeHandle = ({ onResize, onResizeEnd, @@ -12,12 +19,10 @@ const ResizeHandle = ({ let dragHeight = 0 const onDragStart = (evt) => { - // Set the drag ghost image to a transparent 1x1px // https://stackoverflow.com/questions/7680285/how-do-you-turn-off-setdragimage - const img = document.createElement('img') - img.src = - 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' - evt.dataTransfer.setDragImage(img, 0, 0) + if (EMPTY_DRAG_IMAGE.complete) { + evt.dataTransfer.setDragImage(EMPTY_DRAG_IMAGE, 0, 0) + } evt.dataTransfer.setData('text/plain', 'node') // Required to initialize dragging in Firefox