When adding components to the canvas, duplicates are created in the DOM (but not the model)

Question

When I drag a component - say a Map - onto the canvas, it now creates three copies of that element in the DOM. However, the model is correct, and if I refresh the screen, it renders correctly.

Without trying to erect an entire sandbox to reproduce, any quick thoughts on what might be causing this?

Thanks, Andrew

andrewryan1906 · Accepted Answer

OK, as far as I can tell the problem is in Sorter.js and centers around this code: This code is called by onMove any time you start to drag a component onto the canvas. I see that you create temporary component, and then immediately remove it on the next line. The problem is in this block of code: For some reason... when model.trigger runs, it creates TWO identical copies of the component; even though the toAdd array only contains one. I can't figure out why it's firing twice... but the net res...

andrewryan1906 · Answer

This entire problem disappears when I remove this line from my configuration init: Something about that setting causes this behavior. Still don't understand what.

artf · Answer

Thanks @andrewryan1906 for all the insights, actually the Sorter file was in my to refactor list for a while now but didn't yet find the time to handle it... Anyway I'm still confused about what is going on, for sure I need you to create a reproducible demo otherwise I'm not able to help... and one last thing, are you using the latest version of GrapesJS? ps: if the #2493 is caused by this issue I think you can close it

When adding components to the canvas, duplicates are created in the DOM (but not the model)

Question

Answers (3)

Related Questions and Answers

Components & Js - Load Template

Traits appear first time when draged custom component

[Question] Add custom html inside canvas

[QUESTION] render() works on the first time but not on subsequent calls

Paid Plugins That Match This Issue

Browse Plugin Categories