bug: can't stop propagation of react synthetic events

[itsjustaplant]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.19.2

Current Behavior

example-repo I tried several times creating a mono repo example for this by reading this guide but still getting some errors so i would like you to inspect App.js , leaf-component.tsx and parent-component.tsx to understand the event handling flow.

• This issue only occurs with React
• React attached event listeners cannot stop propagation on stencil side event listeners of parent component
• attaching event listeners on react side with ref works as workaround.

export class ParentComponent {
  clickHandler() {
    console.log('parent click');
  }
  render() {
    return (
      <Host onClick={this.clickHandler}>
        <span>parent component</span>
        <slot />
    </Host>
    );
  }
}

<ParentComponent>
        <LeafComponent onClick={(e) => {
          console.log('leaf click');
          e.stopPropagation();
          e.preventDefault();
        }}/>
      </ParentComponent>

Expected Behavior

I expect that, e.stopPropagation() should stop the propagation therefore only leaf event handler should run.

System Info

Build: 1719938890
     Stencil: 4.19.2 🏉
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

• Create a component as parent component with event handler and slot
• Create another component as leaf component
• Build react output of these two components
• Create a react app
• Render this

<ParentComponent>
        <LeafComponent onClick={(e) => {
          console.log('leaf click');
          e.stopPropagation();
          e.preventDefault();
        }}/>
      </ParentComponent>

• stopPropagation doesn't work and stencil side attached event handler is fired before react side handler

Code Reproduction URL

https://github.com/itsjustaplant/stencil-mono

Additional Information

No response

[christian-bromann]

Thanks @itsjustaplant for reporting the issue. We will ingest it into our backlog but let me be clear that the Stencil team has a lot of competing prioritizations and can't give an estimated time when someone will be able to look into this. I recommend to help providing a fix for this if possible. We are happy to support if there are any questions to Stencil and the codebase.