BUG: Layer panel: drag and drop makes items disappear (firefox and chrome)

[lexoyo]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 137.0 and Chrome 136.0.7103.92

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

1. Open the official demo https://grapesjs.com/demo.html
2. To reproduce the exact same structure, paste this JSON in localStorage > gjsProject:

{"assets":[],"styles":[{"selectors":["#ixix"],"style":{"padding":"10px"}},{"selectors":["#ilfp"],"style":{"background-color":"#e7e7e7","padding":"20px"}},{"selectors":["#ivgby"],"style":{"padding":"10px"}},{"selectors":["menu"],"style":{"display":"flex"}},{"selectors":["nav__burger"],"style":{"display":"none"}},{"selectors":["nav_check"],"style":{"display":"none"}},{"selectors":["#ilpnl"],"style":{"padding":"10px"}},{"selectors":["nav"],"style":{"display":"flex","justify-content":"space-between"}},{"selectors":["nav__burger"],"style":{"display":"block"},"mediaText":"(max-width: 992px)","atRuleType":"media"},{"selectors":["menu"],"style":{"background-color":"#e7e7e7","display":"none","flex-direction":"column","padding":"40px","position":"absolute","right":"0px","top":"80px"},"mediaText":"(max-width: 992px)","atRuleType":"media"},{"selectors":[],"selectorsAdd":".nav_check + .menu","style":{"display":"flex"},"mediaText":"(max-width: 992px)","atRuleType":"media","atRule":"media"}],"pages":[{"frames":[{"component":{"type":"wrapper","stylable":["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"],"attributes":{"id":"i9x1"},"components":[{"tagName":"NAV","type":"container","classes":["nav"],"attributes":{"id":"ilfp"},"components":[{"type":"checkbox","void":true,"classes":["nav_check"],"attributes":{"type":"checkbox","id":"check"},"selector":{"mainSelector":{"pseudoClass":null,"selectors":[{"active":true,"type":"id","value":"check"},{"active":true,"type":"class","value":"nav_check"}]}}},{"type":"text","attributes":{"id":"ilpnl"},"components":[{"type":"textnode","content":"Logo","attributes":{"id":"itilh"}}],"custom-name":"Logo"},{"type":"container","classes":["menu"],"attributes":{"id":"i9568"},"components":[{"type":"text","classes":["item"],"attributes":{"id":"ixix"},"components":[{"type":"textnode","content":"Afriaca","attributes":{"id":"ihp2j"}}],"custom-name":"Items","id-plugin-data-source":"ixix-5417","privateStates":[{"expression":[{"dataSourceId":"ds-1","fieldId":"continents","kind":"list","label":"continents","options":{"filter":"{}"},"previewIndex":0,"propType":"field","type":"property","typeIds":["Continent"]}],"id":"__data"},{"expression":[{"componentId":"ixix-5417","exposed":false,"forceKind":"object","label":"Loop data (Continent)","previewIndex":0,"storedStateId":"__data","type":"state"},{"dataSourceId":"ds-1","fieldId":"name","kind":"scalar","label":"name","options":{},"previewIndex":0,"propType":"field","type":"property","typeIds":["String"]}],"id":"innerHTML"}],"selector":{"mainSelector":{"pseudoClass":null,"selectors":[{"active":true,"type":"id","value":"ixix"},{"active":true,"type":"class","value":"item"}]}}}],"custom-name":"Menu","selector":{"atRule":"@media (max-width: 992px)","mainSelector":{"pseudoClass":null,"selectors":[{"active":false,"type":"id","value":"i9568"},{"active":true,"type":"class","value":"menu"}]},"operator":{"displayName":"adjacent to","hasParam":false,"helpLink":"https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator","isCombinator":true,"sentencePre":"When it is","stringRepresentation":" + ","type":"+"},"relatedSelector":{"selectors":[{"active":true,"type":"class","value":"nav_check"}]}}},{"tagName":"LABEL","type":"text","classes":["nav__burger"],"attributes":{"for":"check","id":"ivgby"},"components":[{"type":"textnode","content":"☰","attributes":{"id":"iwbgb"}}],"custom-name":"Button","originalTagName":"div","selector":{"mainSelector":{"pseudoClass":null,"selectors":[{"active":true,"type":"id","value":"ivgby"},{"active":true,"type":"class","value":"nav__burger"}]}}}],"custom-name":"Nav","selector":{"mainSelector":{"pseudoClass":null,"selectors":[{"active":false,"type":"id","value":"ilfp"},{"active":true,"type":"class","value":"nav"}]}}}],"head":{"type":"head","attributes":{"id":"iz3t-2"}},"docEl":{"tagName":"html","attributes":{"id":"iaea-2"}},"COMPONENT_NAME_PREFIX":"","publicStates":[]},"id":"hqYccTexwziqC7Cq"}],"id":"ngEtsfeqULJzmyUR"}],"symbols":[],"settings":{"head":""},"fonts":[],"publication":{},"pagesFolder":"pages"}

3. Open the Layers panel
4. Drag the layer named "Checkbox" and drop it below "Logo"
5. Observe the canvas and the layers list

What is the expected behavior?

The dragged layer moves to the new position

What is the current behavior?

• The dragged layer stays in its original position
• The component "Button" disappears from the canvas and from the layers

Code of Conduct

• I agree to follow this project's Code of Conduct

[pierodetomi]

I can confirm I’m seeing the same issue, and it’s caused by the disappearing element having a computed height of 0px (because it’s using display: none).

While this is definitely a bug, as a temporary workaround you can avoid using display: none on that node inside the editor and use an "equivalent" hiding style that keeps the element in the layout but invisible, e.g. visibility: hidden; pointer-events: none; height: 1px (the 1px height is what actually keeps the element in the editor after the sort operation).

This is obviously just a workaround until the underlying issue is fixed.