[FIX] smarter synthetic events

This commit fixes 2 behaviors regarding synthetic events:

- "non-bubbling" events (such as 'mouseenter', 'focus', etc.) are not
allowed anymore as synthetic events, since this would not work either
way;

- instead of an internal global variable to keep track of what events
have already been registered with synthetic event handlers, special keys
are now assigned on the document object. This has been done to avoid
duplicate listeners when multiple instances of Owl are spawned.

Author: jum-odoo

src/runtime/blockdom/events.ts

@@ -55,6 +55,11 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
 // listener per event type.
 let nextSyntheticEventId = 1;
 function createSyntheticHandler(evName: string, capture: boolean = false): EventHandlerCreator {
+  if (NON_BUBBLING_EVENT_NAMES.has(evName)) {
+    throw new Error(
+      `cannot set synthetic event handler for "${evName}" events: these events do not bubble by default`
+    );
+  }
   let eventKey = `__event__synthetic_${evName}`;
   if (capture) {
     eventKey = `${eventKey}_capture`;
@@ -88,14 +93,27 @@ function nativeToSyntheticEvent(eventKey: string, event: Event) {
   }
 }
 
-const CONFIGURED_SYNTHETIC_EVENTS: { [event: string]: boolean } = {};
+const NON_BUBBLING_EVENT_NAMES = new Set([
+  "blur",
+  "error",
+  "focus",
+  "hashchange",
+  "load",
+  "mouseenter",
+  "mouseleave",
+  "pointercancel",
+  "pointerenter",
+  "pointerleave",
+  "unload",
+]);
 
 function setupSyntheticEvent(evName: string, eventKey: string, capture: boolean = false) {
-  if (CONFIGURED_SYNTHETIC_EVENTS[eventKey]) {
+  const root = document as any;
+  if (root[eventKey]) {
     return;
   }
-  document.addEventListener(evName, (event) => nativeToSyntheticEvent(eventKey, event), {
-    capture,
-  });
-  CONFIGURED_SYNTHETIC_EVENTS[eventKey] = true;
+  const syntheticHandler = nativeToSyntheticEvent.bind(root, eventKey);
+  const options = { capture };
+  root[eventKey] = [evName, syntheticHandler, options];
+  root.addEventListener(evName, syntheticHandler, options);
 }

tests/compiler/event_handling.test.ts

@@ -575,5 +575,16 @@ describe("t-on", () => {
       button.click();
       expect(steps).toEqual(["btnClicked", "divClicked"]);
     });
+
+    test("non-bubbling events cannot be synthesized", () => {
+      const template = `<div t-on-mouseenter.synthetic="onMouseEnter"></div>`;
+
+      const owner = {
+        onMouseEnter() {},
+      };
+      const node = mountToFixture(template, owner);
+      const div = <HTMLElement>node;
+      div.dispatchEvent(new MouseEvent("mouseenter"));
+    });
   });
 });