Skip to content

fix: globe cursor data table resize [DHIS2-19805]#3644

Open
karolinelien wants to merge 2 commits into
masterfrom
fix/globe-cursor-data-table-resize
Open

fix: globe cursor data table resize [DHIS2-19805]#3644
karolinelien wants to merge 2 commits into
masterfrom
fix/globe-cursor-data-table-resize

Conversation

@karolinelien
Copy link
Copy Markdown
Collaborator

@karolinelien karolinelien commented Apr 23, 2026

Description

The "globe" isn't actually a cursor — it's the drag image that macOS Chrome falls back to when the image passed to setDragImage() isn't yet
decoded. The handler created a fresh <img> and assigned .src on the dragstart tick, so the image was always still loading when
setDragImage(img, 0, 0) ran.

This PR:

  • Pre-decodes the 1×1 transparent GIF at module scope so it's loaded before any drag starts
  • Guards setDragImage on EMPTY_DRAG_IMAGE.complete
  • Removes the earlier evt.preventDefault() in the dragover handler — that controls drop-acceptance (no-drop vs move cursor), not the drag image,
    and was orthogonal to this bug

Reference: https://www.sam.today/blog/html5-dnd-globe-icon

Fixes DHIS2-19805

Test plan

  • Open a map with a thematic layer
  • Open the data table (Show/hide data table)
  • Drag the resize handle to resize the table
  • Verify no globe icon appears next to the cursor (test on Chrome / macOS)
  • Verify the data table still resizes correctly across Chrome, Firefox, Safari (Mac + Windows)

Quality checklist

Add N/A to items that are not applicable.

  • Dashboard tested N/A
  • Cypress and/or Jest tests added/updated N/A
  • Docs added N/A
  • d2-ci dependencies replaced N/A
  • Tester approved (JJ)

AI Assisted

@dhis2-bot
Copy link
Copy Markdown
Contributor

dhis2-bot commented Apr 23, 2026

🚀 Deployed on https://pr-3644.maps.netlify.dhis2.org

@dhis2-bot dhis2-bot temporarily deployed to netlify April 23, 2026 09:18 Inactive
@karolinelien karolinelien force-pushed the fix/globe-cursor-data-table-resize branch from f7f090e to d56769e Compare April 23, 2026 09:22
@sonarqubecloud
Copy link
Copy Markdown

@dhis2-bot dhis2-bot temporarily deployed to netlify April 23, 2026 09:24 Inactive
@karolinelien karolinelien marked this pull request as ready for review April 23, 2026 09:25
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) <noreply@anthropic.com>
@karolinelien karolinelien force-pushed the fix/globe-cursor-data-table-resize branch from d56769e to e3fa639 Compare May 26, 2026 13:46
@dhis2-bot dhis2-bot temporarily deployed to netlify May 26, 2026 13:48 Inactive
@BRaimbault BRaimbault self-requested a review May 26, 2026 14:44
@sonarqubecloud
Copy link
Copy Markdown

@dhis2-bot dhis2-bot temporarily deployed to netlify May 26, 2026 14:46 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants