Why an async function, that is being awaited in the middle of the event listener, drops the state and phase of the Event?

Question

Why an async function, that is being awaited in the middle of the event listener, drops the state and the phase of the Event flow? Is it possible to keep it?

For example,

button.addEventListener("click", async (event) => {
  eventSnapshots.push({
    title: "Sync",
    object: extract(event)
  });

  syncFn(event);
  await asyncFn();
  syncFn(event);

  writeToElement(eventSnapshots, view);
});

The snapshot of the events' flow would be something like that:

Sync:
{
  "phase": 2,
  "currentTarget": {},
  "path": 5,
  ...
}
SyncFn:
{
  "phase": 2,
  "currentTarget": {},
  "path": 5,
  ...
}

//await AsyncFn

SyncFn:
{
  "phase": 0,
  "currentTarget": null,
  "path": 0,
  ...
}

(https://codesandbox.io/s/pensive-hill-nzxvnl?file=/src/index.js:514-745)

Answer 1

It's not that awaiting the promise "drops" it, but just that the event continues to bubble after calling your async listener function, without waiting for the promise returned by it. Bubbling automatically changes the currentTarget when running handlers with the same event object at different elements, and when reaching the root of the document it becomes undefined. Then when you async code comes back to look at the event again later, it will already have been changed. The same happens when using setTimeout.