Style Manager Issue.

Hi @Abhisheknanda1344463 did you try to follow my indications here? You don't need to add/remove sectors on each select just play with component properties

@artf I've tried that but if i do like this https://github.com/artf/grapesjs/issues/1428#issuecomment-421640559 then it'll show the style sectors in which that properties are present. I want to show my custom only one style sector for specific component like one i've mentioned above. Don't know if you understand my use case. Please Guide me. Thanks

Here a quick example of usage:

const plugin = (editor) => {
  const { Components, Blocks, Styles } = editor;
  [
    {
      type: 'simple',
      props: {
      	components: 'Simple component',
      },
    },{
      type: 'special', 
      props: {
        components: 'Special component',
      	'stylable-require': ['special-style'], // <- this component requires special styles
      },
    }
  ].forEach(({ type, props }) => {
  	Components.addType(type, {
    	  model: {
      	    defaults: props,
          }
        });
        Blocks.add(type, {
    	  label: type,
    	  content: { type },
        });
  });
  
  Styles.addSector('special',{
    name: 'Special sector',
    open: true,
    properties: [
    	{
      	id: 'special-style',
        type: 'color',
	name: 'My property',
        property: 'color',
        toRequire: true, // <- This property will show up only if requested by component
      }
     ]
  }, { at: 0 });
}

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: false,
  plugins: [plugin]
});

https://jsfiddle.net/1tvrLqem/1/ As you can see the sector will hide if there are no properties to show

Thanks for reporting this, @Abhisheknanda1344463.

The issue with Style Manager Issue. 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);

2. Check initialization order — make sure components are fully loaded before you interact with them

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