BUG: (v0.16.41) Button not set as active on click

[RaresVlaiduc]

Version: v0.16.41

Are you able to reproduce the bug from the demo?

[ ] Yes [x] No

What is the expected behavior?

When I click on a button, the gjs-pn-active class should be added.

Describe the bug detailed

I have 3 buttons for 3 different devices (desktop, tablet and mobile). I have them on a top panel and when I click on them the canvas changes the size but the clicked button is not set as active.

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

[x ] Yes (attach) [ ] No

[Ju99ernaut]

Grapesjs requires your commands to have the run and stop functions for them to toggle panel buttons automatically, so maybe that might be the issue:

const cm = editor.Commands;

// grapesjs unable to toggle panel buttons on this command format 
cm.add('desktop', e => e.setDevice('Desktop'))

// grapesjs able to toggle panel buttons because of run and stop
cm.add('desktop', { 
   run(e) {
      e.setDevice('Desktop')
   }, 
   stop() {} 
});

[kerryj89]

@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" }
            ]
        }]
    }
});