fix(upload): keep the drag preview under the cursor by Adzouz · Pull Request #27542 · strapi/strapi · GitHub
Skip to content

fix(upload): keep the drag preview under the cursor - #27542

Open
Adzouz wants to merge 1 commit into
developfrom
fix/cms-1699
Open

fix(upload): keep the drag preview under the cursor#27542
Adzouz wants to merge 1 commit into
developfrom
fix/cms-1699

Conversation

@Adzouz

@Adzouz Adzouz commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

What does it do?

  • Passes snapCenterToCursor as a DragOverlay modifier in AssetsDndProvider, so the drag chip is centered on the pointer.
  • Adds @dnd-kit/modifiers@9.0.0 to @strapi/upload — the same version content-type-builder already declares, so no new resolution enters the lockfile.
  • Exposes data-testid="drag-overlay-chip" on the chip (inherited by the multi-item variant) for the e2e assertion.
  • Unit test: applies the modifier the provider hands DragOverlay to a known chip rect and asserts the chip's center lands exactly on the pointer.
  • E2E test (grid + table): grabs an item, holds the pointer 60px away, asserts the chip's bounding box contains the cursor. New grabItemAndHold() helper on the assets page object.

Why is it needed?

Dragging an asset or folder showed the preview chip offset from the cursor — far enough on a grid tile to look broken.

DragOverlay had no modifiers, and dnd-kit anchors the overlay to the dragged node's top-left, then translates it by the pointer delta. The chip therefore trailed the cursor by exactly how far into the card or row the grab landed: a few pixels on a table row, most of a tile in grid view. The rows themselves apply no transform, so the overlay is the only moving visual and one modifier fixes both views.

How to test it?

Media Library beta (UNSTABLE_MEDIA_LIBRARY=true):

  1. Upload a couple of assets and create a folder.
  2. In grid view, grab an asset card by its bottom-right area and drag it around. The chip should sit centered under the cursor the whole way, not up-and-left of it.
  3. Repeat in table view.
  4. Multi-select several items and drag — the composite chip follows the cursor the same way.
  5. Drop on a folder: the move still works (drop targets are resolved from the pointer, not the overlay).

Automated:

cd packages/core/upload && yarn jest --config ./jest.config.front.js admin/src/future/pages/Assets/components/Dnd
BETA_MEDIA_LIBRARY=true yarn test:e2e --domains media-library --grep "under the cursor"

Related issue(s)/PR(s)

  • fix CMS-1699

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@Adzouz Adzouz added this to the 5.52.4 milestone Sep 3, 2026
@Adzouz Adzouz self-assigned this Sep 3, 2026
@Adzouz
Adzouz requested review from giu1io and jhoward1994 September 3, 2026 12:26
@Adzouz
Adzouz marked this pull request as ready for review September 3, 2026 12:36
@Adzouz Adzouz added source: core:upload Source is core/upload package pr: fix This PR is fixing a bug needs-qa generates AI QA checklist labels Sep 3, 2026
@Adzouz
Adzouz requested a review from MarionLemaire September 3, 2026 12:37
@trunk-io

trunk-io Bot commented Sep 3, 2026

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs-qa generates AI QA checklist pr: fix This PR is fixing a bug source: core:upload Source is core/upload package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant