Merge pull request #4824 from easyops-cn/steve/v3-event-action-target

fix(): allow setting target event for event actions

Author: weareoutman

packages/runtime/src/internal/bindListeners.spec.ts

@@ -679,7 +679,7 @@ describe("listenerFactory for event.*", () => {
     listenerFactory(
       {
         action: "event.preventDefault",
-        args: ["<% EVENT.detail %>"],
+        args: ["<% EVENT %>"],
       },
       runtimeContext
     )(event);
@@ -688,14 +688,34 @@ describe("listenerFactory for event.*", () => {
 
   test("event.stopPropagation", () => {
     const event = { stopPropagation: jest.fn() } as any;
+    listenerFactory(
+      {
+        action: "event.stopPropagation",
+      },
+      runtimeContext
+    )(event);
+    expect(event.stopPropagation).toHaveBeenCalledWith();
+  });
+
+  test("non-Event object", () => {
+    consoleError.mockReturnValue();
+    const event = {
+      stopPropagation: jest.fn(),
+      detail: { someProp: 123 },
+    } as any;
     listenerFactory(
       {
         action: "event.stopPropagation",
         args: ["<% EVENT.detail %>"],
       },
       runtimeContext
     )(event);
+    expect(consoleError).toHaveBeenCalledWith(
+      "call event.stopPropagation() on non-Event object:",
+      { someProp: 123 }
+    );
     expect(event.stopPropagation).toHaveBeenCalledWith();
+    consoleError.mockReset();
   });
 });
 

packages/runtime/src/internal/bindListeners.ts

@@ -206,10 +206,8 @@ export function listenerFactory(
             break;
 
           case "event.preventDefault":
-            event.preventDefault();
-            break;
           case "event.stopPropagation":
-            event.stopPropagation();
+            handleEventAction(event, method, handler.args, runtimeContext);
             break;
 
           case "console.log":
@@ -338,6 +336,27 @@ export function listenerFactory(
   };
 }
 
+function handleEventAction(
+  event: Event,
+  method: "preventDefault" | "stopPropagation",
+  args: unknown[] | undefined,
+  runtimeContext: RuntimeContext
+) {
+  const computedArgs = argsFactory(args, runtimeContext, event, {
+    useEventAsDefault: true,
+  });
+  const [e] = computedArgs as [Event];
+  if (e instanceof Event) {
+    e[method]();
+  } else {
+    // eslint-disable-next-line no-console
+    console.error(`call event.${method}() on non-Event object:`, e);
+
+    // For compatibility, fallback to the original event.
+    event[method]();
+  }
+}
+
 function handleUseProviderAction(
   event: Event,
   handler: UseProviderEventHandler,