Skip to content

fix: preserve SVG namespace in clone feedback placeholder sync#1968

Merged
clauderic merged 1 commit intomainfrom
claude/keen-kepler
Mar 28, 2026
Merged

fix: preserve SVG namespace in clone feedback placeholder sync#1968
clauderic merged 1 commit intomainfrom
claude/keen-kepler

Conversation

@clauderic
Copy link
Copy Markdown
Owner

@clauderic clauderic commented Mar 28, 2026

Summary

  • Replace innerHTML with replaceChildren(...element.cloneNode(true).childNodes) in the element mutation observer for clone feedback placeholders
  • innerHTML serializes/parses as HTML, stripping SVG namespace info from inline <svg> children (e.g. Lucide icons), causing the placeholder to measure with wrong dimensions and the drop animation to land at the wrong position

Test plan

  • Drag a sortable item with feedback="clone" that contains inline SVG children (e.g. a badge with a Lucide icon next to text)
  • Verify the placeholder preserves the SVG and measures at the correct dimensions
  • Verify the drop animation lands at the correct position

Closes #1962

🤖 Generated with Claude Code

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 28, 2026

🦋 Changeset detected

Latest commit: 267c97c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages
Name Type
@dnd-kit/dom Patch
@dnd-kit/abstract Patch
@dnd-kit/collision Patch
@dnd-kit/geometry Patch
@dnd-kit/helpers Patch
@dnd-kit/react Patch
@dnd-kit/state Patch
@dnd-kit/vue Patch
@dnd-kit/solid Patch
@dnd-kit/svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Replace innerHTML with cloneNode + replaceChildren in the element
mutation observer. innerHTML serializes/parses as HTML, stripping SVG
namespace info from inline SVG children. This caused placeholders to
measure with wrong dimensions, misaligning the drop animation.

Closes #1962

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 28, 2026

Open in StackBlitz

@dnd-kit/abstract

npm i https://pkg.pr.new/@dnd-kit/abstract@1968

@dnd-kit/collision

npm i https://pkg.pr.new/@dnd-kit/collision@1968

@dnd-kit/dom

npm i https://pkg.pr.new/@dnd-kit/dom@1968

@dnd-kit/geometry

npm i https://pkg.pr.new/@dnd-kit/geometry@1968

@dnd-kit/helpers

npm i https://pkg.pr.new/@dnd-kit/helpers@1968

@dnd-kit/react

npm i https://pkg.pr.new/@dnd-kit/react@1968

@dnd-kit/solid

npm i https://pkg.pr.new/@dnd-kit/solid@1968

@dnd-kit/state

npm i https://pkg.pr.new/@dnd-kit/state@1968

@dnd-kit/svelte

npm i https://pkg.pr.new/@dnd-kit/svelte@1968

@dnd-kit/vue

npm i https://pkg.pr.new/@dnd-kit/vue@1968

commit: 267c97c

@clauderic clauderic merged commit d118523 into main Mar 28, 2026
11 checks passed
@github-actions github-actions bot mentioned this pull request Mar 28, 2026
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.

Default feedback placeholder drops inline SVG children, causing wrapped draggable content to collapse by one line during drop animation

1 participant