Button not set as active on click

@Ju99ernaut

Thank you for that. Active state is now working for me when creating devices-c panel through grapesjs.init().

const editor = grapesjs.init({
    panels: {
        defaults  : [{
            id:       'devices-c', // Responsive view controls
            appendTo: '.gjs-toolbar-responsive-views',
            buttons: [
                { id: "set-device-desktop", command: { run(e) { e.setDevice('Desktop') }, stop() {}}, className: "fa fa-desktop", active: 1},
                { id: "set-device-tablet", command: { run(e) { e.setDevice('Tablet') }, stop() {}}, className: "fa fa-tablet" },
                { id: "set-device-mobile", command: { run(e) { e.setDevice('Mobile portrait') }, stop() {}}, className: "fa fa-mobile" }
            ]
        }]
    }
});

Thanks for reporting this, @RaresVlaiduc.

The issue with (v0.16.41) Button not set as active on click 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