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.
opened 09:23PM - 09 Apr 24 UTC
closed 02:42PM - 11 Apr 24 UTC
bug
### 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.
1 Like
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 (15.0 KB)
