Vaadin 14 NPM mode: Events overtaking each other

Flow
1

I have an application that contains an editor for business data. It is written as a non-Vaadin JavaScript component, which fires an event via DOM.dispatchEvent when a field was edited. These “ContentChanged-Events” are caught on the server side by Vaadin and the business object is updated.

Then there is a save button, which is a Vaadin component. The event that is sent upon click of the save button is also processed on the server, but sometimes this event arrives after the “ContentChanged-Event” and the business object is saved before it is updated.

Since the DOM dispatchEvent function is guaranteed to be synchronous, how can the Vaadin event overtake it?

https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent

Is there anything I can do to guarantee the correct order of events?

2

I should add that you might not be able to reproduce this manually, unless you have very quick fingers.

I have a Selenium test that updates a field and then clicks the save button. This triggers the unexpected behavior more often than not, but there are only about 50-100ms between the two events.

3

Stupid me. The Debounce Settings on my custom event are responsible for delaying its firing.