Issue #3176πŸ’¬ AnsweredOpened December 9, 2020by mcottret1 reactions

`setStyle` & `setComponents` options parameter not taken into account

Quick answerby artf❀ 1

Thanks @mcottret the fix is ready for the next release

Read full answer below ↓

Question

Version: 0.16.30

Are you able to reproduce the bug from the demo?

[x] Yes [ ] No

Steps to reproduce:

  • Open the console
  • Execute editor.setComponents('', {avoidStore: true});
  • Execute editor.setStyle('', {avoidStore: true});
  • The "Stored ..." log still appears (see attached screenshot)

What is the expected behavior?

The options parameter should be taken into account. Passing the avoidStore option to true to setStyle & setComponents should prevent the update event from triggering.

What is the current behavior?

The options parameter is not taken into account. Passing the avoidStore option has no effect and an update event is still triggered.

Proposed solution:

I'm sorry I missed on this with the previous PR (for this issue), but there still seems to be 2 problems:

  • The opt object is not passed down to the clear & remove calls for setComponents, causing the avoidStore problem described above.
  • The CssComposer's handleChanges handler call signature does not match the one of the add & remove events: missing the 2nd collection parameter (which causes misreading of the opts parameter).

As always, I'd be happy to take care of the PR if this looks good to you !

Are you able to attach screenshots, screencasts or a live demo?

[x] Yes (attach) [ ] No

<img width="1435" alt="Screenshot 2020-12-09 at 12 15 53 PM" src="https://user-images.githubusercontent.com/9916749/101623160-508d5d80-3a18-11eb-84a6-4953faf7d388.png">

Answers (4)

artfβ€’ January 25, 2021

Thanks @mcottret the fix is ready for the next release

artfβ€’ December 29, 2020

Unfortunately, due to the bad initial naming, avoidStore is intended to skip the UndoManager and not the Storage 😁 The good news, I had to introduce the new noCount option, in order to fix #3189, this will skip triggering the editor changes counter so, it won't trigger the Storage either. That fix brought me also to update properly the signature in handleChanges from CssComposer, but I still need to fix a few other methods to make the whole thing work properly (including those you've suggested).

So, in the next release, the thing should work as you expect with the new noCount option, and, probably, I'll start using a new noUndo option (leaving avoidStore to avoid any breaking change).

ps. as always, thanks for your help ❀️

mcottretβ€’ January 7, 2021

Hello @artf !

I'm sorry to reopen this issue but the setStyle issue still seems to be present.

Redoing the steps above, the "Stored ..." log still appears while calling setStyle with the noCount option.

I'm seeing the fixed handleChanges handler still uses the avoidStore option, but the avoidStore option does not seem to work either.

I didn't look deeper into this so I couldn't identify why the issue persists, but let me know if you want me to :)

Everything works fine with setComponents on the other hand, thanks a lot for that :) !

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @mcottret.

The issue with setStyle & setComponents options parameter not taken into account appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

  1. Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
  // your operation here
}, 0);
  1. Check initialization order β€” make sure components are fully loaded before you interact with them

  2. Use the editor's event system β€” listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

  • Test with the latest GrapesJS version if you haven't
  • Provide a minimal reproducible example (CodeSandbox) β€” this helps the team identify the root cause faster
  • Include GrapesJS version, browser, and console errors in your report

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.