Cannot intercept to CustomEvent on the server-side

[andrea-tomassi]

• Description of the bug
  I want to rise a custom event from the client code of a component, and I want to trigger an eventListener on the server-side.
  @eventhandler only works with polymer events like on-click, so we need to register our own listener.

• Minimal reproducible example

my-comp.html:

<script>
        class MyComp extends Vaadin.ThemableMixin(Polymer.Element) {
            static get is() {
                return 'my-comp';
            }

            handleClick(e) {
                alert("Original click event: " + e.target);
                this.dispatchEvent(new CustomEvent('serverEvent'), {});
                
            }
        }

        window.customElements.define(MyComp.is, MyComp);
</script>

MyComp.java
...

@Override
	protected void onAttach(AttachEvent attachEvent) {
		getElement().addEventListener("serverEvent", e -> System.out.println(e));
		super.onAttach(attachEvent);
	}

...

• Expected behavior
  When this.dispatchEvent(new CustomEvent('serverEvent'), {}); is executed, an event triggers the server side listener.
• Actual behavior
  alert("Original click event: " + e.target); opens the alert message, but nothing happens on the server code.

[greenhost87]

I have similar issue, but I found strange behaviour

Preconditions:

custom Vaadin component based on html + java code linked via @Tag annotation

Behaviour:

• if I inject my component inside other component html, by tag - no events arrived to server
• If I inject my component via constructor + add(Component component) all events arrived to server

[Legioth]

@greenhost87 Wasn't the conclusion in your case that the problem was that events were fired already before Flow had any chance to attach its event listeners?

[greenhost87]

@Legioth We discuss that problem in Gitter. For the record I copy more detailed description of my problem and my Solution.

Description

I want to use i18n localization in my Vaadin html template. For this I use approach from GH-3906 direct link to Gist.
Problem below happens when _requestTranslationEvent method is fired inside translation-mixin.html

Example

First case

Put component tag MyComponent inside html template of other component Main.

Html template code is:

<dom-module id="main">
  <template>
    <my-component id="my-test-component">
    </my-component>
  </template
</dom-module>

Java class of main component:

class Main extends PolymerTemplate<TemplateModel> {
  @Id("my-test-component")
  private MyComponent component;

}

Second case

Put component tag MyComponent inside <div> tag mapped via Java code.

Html template code is:

<dom-module id="main">
  <template>
    <div id="holder">
    </div>
  </template>
</dom-module>

Java code is:

class Main extends PolymerTemplate<TemplateModel> {
  @Id("holder")
  private Div div;

  public Main() {
    div.add(new MyComponent());
  }
}

Problem

If I use first approach no events go to server.
If use second approach all event go well without any problem.
In both cases after page completely loaded any other events, like on-click for button work as expected

Expected behaviour

In both approach events not lost. I think this can be designed like some await functionality in place where Polymer and Vaadin backend joined together.

My solution

Add to component mixin method _setInitializationCompleted() with code

_setInitializationCompleted() {
    this.initializationCompleted = true
}

And modify _requestTranslationEvent - add

In java code, inside component constructor add:

this.getElement().callFunction("_setInitializationCompleted");

In result any localization events attempt to send self only after binding between Polymer and Vaadin is completed