Issue #1708💬 AnsweredOpened January 4, 2019by charlietoleary0 reactions

StyleManager events fire multiple times per change

快速解答by khbhr

Hello, I am having the same problem and since that it is not solved yet, it would be a solution to use the debounce technique. check this example.

Read full answer below ↓

Question

To reproduce:

代码片段TEXT
On a fresh install of GrapesJS, within the demo page (within index.html), add an event listener like so:

`editor.on('component:styleUpdate:width', (model) => {
   console.log(model);
});`

### Issue:
When changing the 'width' value of any element, the 'model' variable will be printed multiple times.

The issue seems to be more severe when listening for 'list' properties such as Font Family, Font Weight or Display. E.g:
`editor.on('component:styleUpdate:font-family', (model) => {
   console.log(model);
});`

For these kinds of properties, I have noticed that the events fire multiple times when the editor is first loaded (before any user interaction), and also multiple times when their value is changed.

### Cause:
After some investigation, i thought the issue may relate to the value of the properties being set within the GrapesJS framework multiple times to accommodate the Undo Manager [(Property.js:58)](https://github.com/artf/grapesjs/blob/dev/src/style_manager/model/Property.js#L58), although I am still unable to determine the underlying cause or provide a fix for the issue myself.

### Symptoms:
Due to this, it will be hard for developers to use the StyleManager events as intended in some cases. For example, if you would like to listen for what the value was changed from via the ._previousAttributes property you will have difficulty, as the event is fired multiple times: and each time the previous attributes specified are different and don't relate to what the user actually chose.

Answers (3)

khbhrSeptember 18, 2019

Hello,

I am having the same problem and since that it is not solved yet, it would be a solution to use the debounce technique.

check this example.

ajumellApril 18, 2020

Hello,

I also found this issue. The event is firing even without changing the width I added the following code to the html page and the log is generated multiple times.

editor.on('component:styleUpdate:width', (model) => { console.log('Component width updated:', model); });

I have recorded a video proof and its the below link

https://drive.google.com/file/d/1zoTUN-e400YDVPXt2DESAemSL6STh0TU/view?usp=sharing

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 →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.