Macro property panel controls does not get binded

Summary

Add controls to the dynamic macro propertyPanel as (i.e.https://developer.atlassian.com/cloud/confluence/modules/macro-property-panel), You should be able to add the UI components, however, handlers to the components are not binded properly:

atlassian-descriptor.json:

• Add the propertyPanel element to the macro and define a number of buttons.

  "propertyPanel": {
      "url": "/hello-world",
      "controls": [
          {
              "type": "button",
              "label": {"value": "<img src='{{confluenceConnectHost}}/icons/size-property-button.png' style='width:20px;height:20px;margin-top:4px' />"},
              "key": "sizeButtonSmall"
          },
          {
              "type": "button",
              "label": {"value": "<img src='{{confluenceConnectHost}}/icons/size-property-button.png' style='width:16px;height:16px;margin-top:6px' />"},
              "key": "sizeButtonMedium"
          },
          {
              "type": "button",
              "label": {"value": "<img src='{{confluenceConnectHost}}/icons/size-property-button.png' style='width:12px;height:12px;margin-top:8px' />"},
              "key": "sizeButtonLarge"
          },
          {
              "type": "button",
              "label": {"value": "Original"},
              "key": "sizeButtonOriginal"
          }
      ]
  }
  

• The buttons appear on the macro panel, and properties-panel.html loads as expected.

• In your html, I include all.js and execute onMacroPropertyPanelEvent to associate event handlers to the buttons. Add debugger statements to see if the various actions are being executed. Here is the code:

  <script type="text/javascript" src="{{baseUrl}}/atlassian-connect/all-debug.js" data-options="margin:false"></script>
  <script type="text/javascript">
  try {
      debugger;
      AP.require('confluence', function(confluence) {
         debugger;
         confluence.onMacroPropertyPanelEvent({
              "sizeButtonLarge-click.some.macro.property-panel": function () {
                  debugger;
              },
              "sizeButtonMedium-click.some.macro.property-panel": function () {
                  debugger;
              },
              "sizeButtonSmall-click.some.macro.property-panel": function () {
                  debugger;
              }
         });
      });
      debugger;
  } catch (err) {
      debugger;
  }
  
  </script>
  

Aside from the events not binded, the event handler names are not in the documentation. The pages, and confluence.onMacroPropertyPanelEvent() executes without error, but the event functions do not execute when a button is clicked.