Issue #6260Opened October 24, 2024by hr12010 reactions

BUG: an error when I use component:clone in a component

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Microsoft Edge 130.0.2849.46

Reproducible demo link

https://jsfiddle.net/uwybfd98/

Describe the bug

How to reproduce the bug?

  1. select the carousel component
  2. click the space in the upper right or lower left corner of the image and select div;
  3. clone twice

What is the expected behavior? a clone is triggered only once

What is the current behavior? it recurses, and it causes a jam

If is necessary to execute some code in order to reproduce the bug, paste it here below:

onRender({ el, model }) {
        model.getChildAt(0).forEachChild(child => {
          child.on('component:clone', function (originalModel, cloneModel) {
            console.log('clone')
            if (model.getChildAt(0).get('components').length == 6) return;
            model.trigger("change:script"); 
          })
          child.on('component:remove:before', function (model1, removeFn, options) {
            console.log('remove')
            if (model.getChildAt(0).get('components').length == 2) {
              options.abort = true;
              return;
            }
            model.trigger("change:script");
          })
        })
      },

dc23c5c8e486b07c53a673e38406a1e

Code of Conduct

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

Answers (1)

artfNovember 1, 20240 reactions

@hr1201 onRender could be triggered many times, you should never attach listeners there if you don't clean up the properly.

Your logic is also purely model related so it shouldn't even be in the view, just move your code in the model.init method

Related Questions and Answers

Continue research with similar issue discussions.

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.