# Why some components' inner content moves during drag and drop into a grid?

**URL:** <https://community.penpot.app/t/why-some-components-inner-content-moves-during-drag-and-drop-into-a-grid/5096>\
**Category:** Ask the community\
**Tags:** design\
**Created:** [April 16, 2024, 8:30pm UTC](https://community.penpot.app/t/why-some-components-inner-content-moves-during-drag-and-drop-into-a-grid/5096 "2024-04-16T20:30:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Picorims](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/picorims/32/4897_2.png) [@Picorims](https://community.penpot.app/u/Picorims)\
**Post date:** [April 16, 2024, 8:30pm UTC](https://community.penpot.app/t/why-some-components-inner-content-moves-during-drag-and-drop-into-a-grid/5096/1 "2024-04-16T20:30:45Z")

</div>

Hello,

I am creating a design system with components v2, however as shown in the link below, I am having an issue with my input components. Whenever I drag and drop them into a grid layout, the inner content keeps moving instead of snapping with the container. I am not sure if it is a bug or if I am doing something wrong… For information, it’s a board with a grid layout, and it happens with both the main component and the “variant” main components. However, with icons or buttons, I do not have this issue… Does someone has any explanation and know how to avoid it ? This slows me down a lot as I can’t find a way to not get this behavior (I tried copy paste, drag and drop from the assets and from outside the board too, I tried to see if there was a possibility to reset to main, which doesn’t seem to show up).

I know that the inner structure can’t change in this new system. I am not trying to do any of it, this modification is accidental, I don’t know how to not trigger it.

here is the link with a video to make it easier to understand. If it is not clear please let me know.

> <https://github.com/penpot/penpot/issues/4395>
>
> \### Steps To Reproduce
> 
> 1. Drag and drop a component copy in a grid layout
> 2. R…elease the mouse once the component is in the desired cell
> 
> \### Expected behavior
> 
> The component is placed correctly in the grid.
> 
> \### Actual behavior
> 
> The component content is misplaced, and upon undo/redo can lead to unexpected behavior (flicking component that cannot be interacted with), and even crashes.
> 
> \### Screenshots or video
> 
> 
> https://github.com/penpot/penpot/assets/41078963/6f4c5ce6-c7ea-4bdc-a6f3-1e6f41266b19
> 
> 
> 
> \### Desktop (please complete the following information)
> 
> \- Windows 10
> \- Firefox 124.0.2 (64 bits)
> 
> \### Smartphone (please complete the following information)
> 
> \_No response\_
> 
> \### Environment (please complete the following information)
> 
> \- https://design.penpot.app/
> 
> \### Frontend Stack Trace
> 
> \`\`\`console
> Hint: error on validating file referential integrity
> Prof ID: 8ec95363-4e2c-80a4-8002-c4fa44578d68
> Team ID: 8ec95363-4e2c-80a4-8002-c4fa44de8f06
> File ID: eb74e0b5-6d03-81d2-8004-29cf22baeee7
> 
> Data:
> {:type :validation,
> :code :referential-integrity,
> :hint "error on validating file referential integrity",
> :file-id #uuid "eb74e0b5-6d03-81d2-8004-29cf22baeee7",
> :details
> \[{:code :child-not-found,
> :hint "Child 99121aa4-327a-8008-8004-2c68e7b12d1c not found in parent 05b766be-b93a-8000-8004-2afc564e4725",
> :shape
> ##object\[Function\]{:id #uuid "05b766be-b93a-8000-8004-2afc564e4725",
> :name "Inputs",
> :type :frame,
> :x 380,
> :y 978,
> :width 1124.0000000000002,
> :height 400,
> :rotation 0,
> :selrect ##object\[Function\]{#, #, #, #, #, #, #, #},
> :points \[# # # #\],
> ...},
> :file-id #uuid "eb74e0b5-6d03-81d2-8004-29cf22baeee7",
> :page-id #uuid "eb74e0b5-6d03-81d2-8004-29cf22baeee8",
> :shape-id #uuid "05b766be-b93a-8000-8004-2afc564e4725",
> :args
> {:parent-id #uuid "05b766be-b93a-8000-8004-2afc564e4725", :child-id #uuid "99121aa4-327a-8008-8004-2c68e7b12d1c"}}\]}
> 
> Trace:
> PENPOT.Dh@https://design.penpot.app/js/shared.b130cc40f.js:3468:38
> PENPOT.Eh@https://design.penpot.app/js/shared.b130cc40f.js:3468:355
> PENPOT.Fh@https://design.penpot.app/js/shared.b130cc40f.js:3468:308
> PENPOT.Lx@https://design.penpot.app/js/shared.b130cc40f.js:4409:110
> BQa/\<@https://design.penpot.app/js/shared.b130cc40f.js:4383:236
> u@https://design.penpot.app/js/shared.b130cc40f.js:243:276
> r@https://design.penpot.app/js/shared.b130cc40f.js:243:218
> d@https://design.penpot.app/js/shared.b130cc40f.js:150:99
> next@https://design.penpot.app/js/shared.b130cc40f.js:158:429
> next@https://design.penpot.app/js/shared.b130cc40f.js:221:222
> d@https://design.penpot.app/js/shared.b130cc40f.js:150:99
> next@https://design.penpot.app/js/shared.b130cc40f.js:158:429
> next@https://design.penpot.app/js/shared.b130cc40f.js:243:350
> d@https://design.penpot.app/js/shared.b130cc40f.js:150:99
> next@https://design.penpot.app/js/shared.b130cc40f.js:158:429
> next@https://design.penpot.app/js/shared.b130cc40f.js:221:222
> d@https://design.penpot.app/js/shared.b130cc40f.js:150:99
> next@https://design.penpot.app/js/shared.b130cc40f.js:158:429
> shadow$provide\[1\]/q/\</\<@https://design.penpot.app/js/shared.b130cc40f.js:151:383
> 
> 
> Last events:
> \[":app.main.data.workspace.thumbnails/assoc-thumbnail"
> ":app.main.data.workspace/workspace-focus-lost"
> ":app.main.data.workspace.undo/check-open-transactions"
> ":app.main.data.workspace.transforms/start-move-selected"
> ":app.main.data.workspace.viewport/finish-panning"
> ":app.main.data.workspace.zoom/finish-zooming"
> ":app.main.data.workspace.collapse/expand-all-parents"
> ":app.main.data.workspace.selection/select-shape"
> ":app.main.data.workspace/copy-selected"
> ":app.main.data.workspace.grid-layout.editor/stop-grid-layout-editing"
> ":app.main.data.workspace.selection/deselect-all"
> ":app.main.data.workspace.selection/handle-area-selection"
> ":app.main.data.workspace/set-margins-selected"
> ":app.main.data.workspace.selection/select-shapes-by-current-selrect"
> ":app.main.data.workspace.viewport/finish-panning"
> ":app.main.data.workspace.zoom/finish-zooming"
> ":app.main.data.workspace.selection/update-selrect"
> ":app.main.data.workspace.undo/start-undo-transaction"
> ":app.main.data.workspace.changes/update-indices"
> ":app.main.data.workspace.undo/append-undo"
> ":app.main.data.workspace/paste-shapes"
> ":app.main.data.workspace.changes/commit-changes"
> ":app.main.data.workspace.thumbnails/clear-thumbnail"
> ":app.main.data.workspace.collapse/expand-all-parents"
> ":app.main.data.workspace.selection/select-shapes"
> ":layout/update"
> ":app.main.data.workspace.undo/start-undo-transaction"
> ":app.main.data.workspace.guides/move-frame-guides"
> ":app.main.data.workspace.comments/move-frame-comment-threads"
> ":app.main.data.workspace.changes/update-indices"
> ":app.main.data.workspace.undo/append-undo"
> ":app.main.data.workspace.changes/update-shapes"
> ":app.main.data.workspace.changes/commit-changes"
> ":app.main.data.workspace.changes/update-shapes"
> ":app.main.data.workspace.modifiers/clear-local-transform"
> ":app.main.data.workspace.undo/commit-undo-transaction"
> ":app.main.data.workspace.modifiers/apply-modifiers"
> ":app.main.data.workspace.shape-layout/update-layout-positions"
> ":app.main.data.workspace.undo/commit-undo-transaction"
> ":app.main.data.workspace/paste-shapes"
> ":app.main.data.workspace/paste-transit"
> ":app.main.data.workspace/paste-from-event"
> ":app.main.data.workspace.texts/update-position-data"
> ":app.main.data.workspace.texts/clean-text-modifier"
> ":app.main.data.workspace.changes/send-update-indices"
> ":app.main.data.workspace.changes/update-shapes"
> ":app.main.data.workspace.texts/commit-position-data"
> ":app.main.data.workspace.thumbnails/request-thumbnail"
> ":app.main.data.workspace.thumbnails/update-thumbnail"
> ":app.main.data.workspace.persistence/persist-changes"
> ":app.main.data.workspace.thumbnails/assoc-thumbnail"\]
> \`\`\`
> 
> 
> \### Backend Stack Trace
> 
> \_No response\_
> 
> \### Additional context
> 
> The component contains a modifed copy of a component (icon) from Lucide Icons, which is a library dating prior to PenPot 2.0, and which was automatically updated (like other saves).
> 
> It might be linked to #4379 , however since I am not sure, I prefered filling a new issue. I am sorry if it is a duplicate.

Thanks in advance, and sorry if I am not posting in the right place or if it is trivial 😅

Picorims.

---

<div class="post-metadata">

**Author:** ![Picorims](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/picorims/32/4897_2.png) [@Picorims](https://community.penpot.app/u/Picorims)\
**Post date:** [April 17, 2024, 8:23pm UTC](https://community.penpot.app/t/why-some-components-inner-content-moves-during-drag-and-drop-into-a-grid/5096/2 "2024-04-17T20:23:31Z")

</div>

Through additional experimentations, it seems to be a behavior between a component with a grid layout and a frame with a grid layout in general. Here is a penpot file that allows to reproduce the behavior (dragging the blue component copy into the grid frame). I am still not sure if it is a bug…

[grid and components problem.penpot](https://community.penpot.app/uploads/short-url/eqnuZ3lbR9s6yfYzHkf7z1Ihiv5.penpot) (15.0 KB)