#4122: Globally prevent native form submissions (#4136)

src/extensionContext.ts

@@ -18,6 +18,10 @@
 // Init rollbar early so we get error reporting on the other initialization
 import "@/telemetry/reportUncaughtErrors";
 
+// We don't use native, full-page-reload form submissions
+// eslint-disable-next-line import/no-unassigned-import -- Auto-initialization
+import "@/utils/preventNativeFormSubmission";
+
 // Handles common HTTP errors
 import enrichAxiosErrors from "@/utils/enrichAxiosErrors";
 

src/options/pages/blueprints/ListFilters.tsx

@@ -51,12 +51,7 @@ function ListFilters({ teamFilters, tableInstance }: ListFiltersProps) {
 
   return (
     <Col sm={12} md={3} xl={2} className={styles.root}>
-      <Form
-        className="mb-4 mr-3"
-        onSubmit={(event_: React.FormEvent<HTMLFormElement>) => {
-          event_.preventDefault();
-        }}
-      >
+      <Form className="mb-4 mr-3">
         <Form.Control
           id="query"
           placeholder="Search all blueprints"

src/pageEditor/ElementWizard.tsx

@@ -143,9 +143,6 @@ const ElementWizard: React.FunctionComponent<{
       <BootstrapForm
         autoComplete="off"
         noValidate
-        onSubmit={(event) => {
-          event.preventDefault();
-        }}
         onReset={handleReset}
         className={cx(styles.form, "full-height")}
       >

src/utils/preventNativeFormSubmission.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2022 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/>.
+ */
+
+/**
+ * @file Automatically catch and prevent all native `submit` events in extension:// pages
+ * https://github.com/pixiebrix/pixiebrix-extension/issues/3275
+ * https://github.com/pixiebrix/pixiebrix-extension/issues/3879
+ * https://github.com/pixiebrix/pixiebrix-extension/issues/4122
+ */
+import { isWebPage } from "webext-detect-page";
+
+function preventDefault(event: Event): void {
+  event.preventDefault();
+  console.debug("The native submission of the form has been prevented");
+}
+
+if (!isWebPage()) {
+  document.addEventListener("submit", preventDefault);
+}