Stencil: Can't get events via JSX handler attribute (React)

[mikberg]

Stencil version:

@stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

I have a component with an EventEmitter, let's call it ionInput, which I'm trying to use from React. The documentation says I can get events using <my-component onIonInput={handler}> in JSX, but the handler is never called. I've confirmed that the attribute onIonInput exists in components.d.ts, and is exactly the same as in JSX. I've also confirmed that the event is emitted.

I can get the events by manually calling addEventListener on the component.

Expected behavior:

Get emitted events by giving a handler to the corresponding JSX attribute.

Steps to reproduce:

See code below.

Related code:

stencil component

@Component({
  tag: 'my-component',
})
export class MyComponent {
  @Event() ionInput!: EventEmitter<string>;

  ...

  protected handleSomething(value: string) {
    this.ionInput.emit(value);
  }
}

react component

class ReactComponent extends React.Component {
  onChange = () => {
    // I'm never called
  }

  render() {
    return (
      <my-component onIonChange={this.onChange} />
    );
  }
}

Other information:

Relevant documentation: https://stenciljs.com/docs/events#using-events-in-jsx
I'm using [email protected], [email protected].

[mattcosta7]

The docs could be more explicit but they actually say "within a stencil application or component..."

React uses the synthetic event instead of Dom events, and it isn't extensible, so you need to listen to the event names in a ref, rather than in Jsx

Preact, however does work as you expected, since it uses Dom based events

[mikberg]

Oh, ok. That explains it, thank you for you response!

[ufollettu]

@mattcosta7 Could you axplain that? I use a React class Component and I don't know how to create a ref for the custom event

[joohncruz]

I was looking at the "ion-input" component and the way people use it is the same as stated at the opening of the issue ... so it should work.

https://github.com/ionic-team/ionic/blob/master/core/src/components/input/input.tsx

[txbrown]

I have exactly same situation inside a stenciljs app and this does not work as demonstrated in the documentation.