Trigger correct events (#8963)

* Trigger correct events

* Lint

* Prettier

* add e2e test

---------

Co-authored-by: Eduardo <[email protected]>

end-to-end-tests/tests/runtime/customEvents.spec.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { test, expect } from "../../fixtures/testBase";
+import { ActivateModPage } from "../../pageObjects/extensionConsole/modsPage";
+// @ts-expect-error -- https://youtrack.jetbrains.com/issue/AQUA-711/Provide-a-run-configuration-for-Playwright-tests-in-specs-with-fixture-imports-only
+import { test as base } from "@playwright/test";
+
+test("custom event brick functionality", async ({ page, extensionId }) => {
+  const modId = "@e2e-testing/custom-event-test";
+
+  const modActivationPage = new ActivateModPage(page, extensionId, modId);
+  await modActivationPage.goto();
+
+  await modActivationPage.clickActivateAndWaitForModsPageRedirect();
+
+  await page.goto("/advanced-fields/");
+
+  await page.getByRole("heading", { name: "Advanced Fields" }).click();
+
+  await expect(
+    page.getByRole("status").filter({ hasText: "Custom Event Triggered" }),
+  ).toBeVisible();
+});

jest.config.js

@@ -40,6 +40,7 @@ const esmPackages = [
   "p-memoize",
   "p-retry",
   "p-timeout",
+  "proper-event",
   "react-base16-styling",
   "react-json-tree",
   "serialize-error",

package.json

@@ -124,6 +124,7 @@
     "primeicons": "^6.0.1",
     "primereact": "^7.1.0",
     "prop-types": "^15.7.2",
+    "proper-event": "^0.9.1",
     "psl": "^1.8.0",
     "react": "^17.0.2",
     "react-ace": "^12.0.0",

src/bricks/effects/customEvent.ts

@@ -16,6 +16,7 @@
  */
 
 import { type BrickArgs, type BrickOptions } from "@/types/runtimeTypes";
+import properEvent from "proper-event";
 import { type JsonObject } from "type-fest";
 import { type UiSchema, type Schema } from "@/types/schemaTypes";
 import { EffectABC } from "@/types/bricks/effectTypes";
@@ -71,8 +72,7 @@ class CustomEventEffect extends EffectABC {
     }: BrickArgs<{ eventName: string; data?: JsonObject }>,
     { root = document }: BrickOptions,
   ): Promise<void> {
-    const event = new CustomEvent(eventName, { detail: data, bubbles: true });
-    root.dispatchEvent(event);
+    root.dispatchEvent(properEvent(eventName, { detail: data, bubbles: true }));
   }
 }
 

src/bricks/effects/event.ts

@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import properEvent from "proper-event";
 import { EffectABC } from "@/types/bricks/effectTypes";
 import { type BrickArgs, type BrickOptions } from "@/types/runtimeTypes";
 import { type Schema } from "@/types/schemaTypes";
@@ -82,16 +83,7 @@ export class ElementEvent extends EffectABC {
     // NOTE: the event is not "trusted" as being a user action
     // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
     for (const element of $elements) {
-      if (event === "click") {
-        if (element instanceof Document) {
-          logger.warn("Cannot call 'click' on document");
-        } else {
-          // Trigger a proper MouseEvent on the most common event
-          element.click();
-        }
-      } else {
-        element.dispatchEvent(new Event(event, { bubbles: true }));
-      }
+      element.dispatchEvent(properEvent(event, { bubbles: true }));
     }
   }
 }

src/utils/domFieldUtils.ts

@@ -132,6 +132,6 @@ export async function setFieldValue(
     }
 
     // Browsers normally fire this on `blur` if it's a text field, otherwise immediately
-    field.dispatchEvent(new KeyboardEvent("change", { bubbles: true }));
+    field.dispatchEvent(new Event("change", { bubbles: true }));
   }
 }