DOM events not handled by client-only components

[vwong]

Marko Version: 5.21.1

Details

Emitted DOM event not handled by client-only component (denoted by component-browser.js), but are caught by normal component (denoted by component.js)

// app-button.marko
<button on-click("emit", "click")>
  <${input.renderBody}/>
</button>

// broken.marko
<app-button on-click("handleIt")>
  broken
</app-button>

// broken.component-browser.js
export default class {
  handleIt () {
    alert("nah") // expect this to fail
  }
}

// working.marko
<app-button on-click("handleIt")>
  working
</app-button>

// working.component.js
export default class {
  handleIt () {
    alert("yeah") // expect this to work
  }
}

Expected Behavior

It should not matter how the parents are split, the click handler should continue to work.

Actual Behavior

In the above <working /> creates a button that when clicked, generates the alert "yeah", but </broken> has similar looking code, but is in a component-browser.js file, doesn't work.

Your Environment

Node: 16.13.2, Mac OS 12.3.1, Chrome 101, Firefox 99, Firefox 100.