BUG: Component model and view inits every time it's dragged over every component present in Canvas on which it can be dropped into

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome Version 130.0.6723.59 (Official Build) (arm64)

Reproducible demo link

https://codepen.io/btmkt/pen/QWeOJRB?editors=1111

Describe the bug

How to reproduce the bug?

Open console.
Drop multiple components inside the canvas(easy to reproduce with 3 columns for example).
Drag the test-comp component added at the end in the extra category over the added components.

What is the expected behavior? The component model and view init events (at least, not sure if there are others) should trigger only when dropping the component into the Canvas and not every time it's dragged above a component in which it can be dropped.

What is the current behavior? The component model and view init events are triggered every time you drag it over a component it can be dropped into, and twice when dropped. This causes a lot of issues especially if for example you trigger a modal open( it will add as many modals, if not conditioned, as many times init is triggered).

I've created a pen for v0.21.13 (https://codepen.io/btmkt/pen/OJKOrPQ?editors=1111) also so you can see the difference, same steps to reproduce the issue apply. I am currently on v0.21.10 which works the same as v0.21.13, from my tests at least, and would like to bump to v.0.22.1, but can't due to this new behaviour.

Please let me know if you need any other information. Thank you.

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (3)

artf• November 5, 20241 reactions

@mohamedsalem401 this is probably happening due to the shallow editor. I think it would make sense to leverage the temporary option (which we already use to skip some actions) in canMove. wdyt?

const wrapper = this.getShallowWrapper();
srcModel = wrapper?.append(source, { temporary: true })[0] || null;

mohamedsalem401• November 5, 20241 reactions

@artf Yes, I suspect it has to do with the shallow editor. Hopefully the temporary option will work and then I'll open a PR

bt-mkt• November 8, 20241 reactions

@mohamedsalem401 this is probably happening due to the shallow editor. I think it would make sense to leverage the temporary option (which we already use to skip some actions) in canMove. wdyt?
const wrapper = this.getShallowWrapper();
srcModel = wrapper?.append(source, { temporary: true })[0] || null;

Hello @artf,

The change above, which I saw was implemented, doesn't seem to fix the behaviour I encountered. It's still the same as in version 0.22.1. I've updated the pen to 0.22.3 (https://codepen.io/btmkt/pen/QWeOJRB?editors=1111) and I've also ran some tests in my app which confirms the above.

Thank you. Hope you will give it another try.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

BUG: Component model and view inits every time it's dragged over every component present in Canvas on which it can be dropped into

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (3)

Related Questions and Answers

BUG: Component disappears when we select all the inner text and use backspace. Link component disappears even when we try to update the text.

BUG: Performance issue while dragging component to canvas when you have 2k component on canvas

BUG: Undo manager not working properly on undoing a remove action

BUG: component.remove() in 'component:mount' does not remove the rendered view

Paid Plugins That Match This Issue

Browse Plugin Categories