Dom Event data empty

So I have been at this for a couple of days now and I just can’t figure this out.
I have a DOM Event from Swiper JS which I want to consume via Vaadin to do some stuff with it after the fact. This Dom Event has an array called “detail” in which the Data I want to use is located.
I’ve tried using the DomEvent Annotation combined with the EventData Annotation to get the values out of this, however since that didn’t work I wanted to check the event data being sent to Vaadin via a simple EventListener through the Element API.

getElement().addEventListener("flow-swiper-progress", event -> {

(I just look at the data on the debugger hence no prints or anything)

After looking at the data I’ve noticed that the eventData is empty. If anybody could give me some directions on how something like this would be handled it would be greatly appreciated.

Did you tried to use addEventData with the listener registration to get the event information you need?

About the DomEvent annotation, can you show the code you tried? Event, listener registration,…

Ah yeah, sorry, it’s currently 7 am and I worked through the night so I’m a tad tired :sweat_smile:

I have used the addEventData, however that either lead to an Error saying something about cyclic dependency when using “event.detail” or a reference Error with “detail”.

As for the the DomEvent stuff here’s one of the tries as an example:

public class ProgressEvent extends ComponentEvent<Swiper> {

   * Creates a new event using the given source and indicator whether the event originated from the
   * client side or the server side.
   * @param source     the source component
   * @param fromClient <code>true</code> if the event originated from the client
   *                   side, <code>false</code> otherwise
  public ProgressEvent(Swiper source, boolean fromClient, @EventData("event.detail") String arr) {
    super(source, fromClient);

All i did was try to change the EventData value to a couple of things (event.detail, event.detail[1], detail,…), as well as changing the Data type. That was my last ditch effort just hoping it would get a string I could parse at worst. I have tried JsonArray, JsonObject and a couple of other things there.

The Listener registration is just the standard addListener Code:

public Registration addProgressEventListener(ComponentEventListener<ProgressEvent> listener) {
    return super.addListener(ProgressEvent.class, listener);

I just tried this simple example and it works as expected

        getElement().addEventListener("my-event", ev -> {

        add(new Button("Fire client event",  ev ->
                        $0.dispatchEvent(new CustomEvent("my-event", { detail: [1,2,3] }));

I the listener I can use ev.getEventData().getArray("event.detail") and I get a JsonArray

That’s interesting, whenever I try to put “event.detail” inside the addEventData part I get this error message in the browser and the loading bar just keeps blinking.

how do you create the CustomEvent on the client side?

the event is being generated by SwiperJS, I just try to consume it

Swiper JS creates an event named flow-swiper-progress?

it has a prefix attribute where I can add the “flow-swiper-” prefix

normally it would just be called progress

Ah, ok. Thanks for clarification

I tried to remove that, but that doesn’t seem to change much. The interesting part is event itself does not lead to any error message, but once “.detail” is added to it, it starts showing the error message

From the examples I understand that detail contains element and progress value

const [swiper, progress] = event.detail;

So you may use addEventData("event.detail[1]"); to get only the value

hmm I see, I’ll check that really quickly

Oh! Seems to work, I also tried if it worked in the EventData Annotation and it seems to work fine. Guess I must have written something wrong before, because I definitely tried asking for just the array index 1. :sweat_smile:
Oh well, thank you very much!