Trigger events from custom GrapesJS panel

Question

I have a custom panel that is being added to GrapesJS editor. The panel has a dropdown of values. I would like to trigger a function to run when the selected item in the dropdown is changed. I have tried the following approach:

editor.Panels.addPanel({
            id: 'myPanel',
            content: '<select onChange="onChangeFn"><option>a</option><option>b</option></select>',
            visible: true,
            buttons: [],
        });

If the function onChangeFn() is not defined, I do get an error when changing the selected item in the dropdown. However when the function is defined, it is not run (and there is no error).

I understand that if I was using buttons, I can configure the command property to execute the relevant command. However, in this case the panel needs to be a dropdown.

Answer 1

I ended up attaching an event listener directly. That is, after giving an id to the select element (e.g. dropdownElement),

document.getElementById("dropdownElement").addEventListener('change', function(e) {console.log(e.target.value);});