Polyfill SubmitEvent for PaleMoon

web_src/js/features/common-global.js

@@ -6,7 +6,7 @@ import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
 import {svg} from '../svg.js';
-import {hideElem, showElem, toggleElem} from '../utils/dom.js';
+import {hideElem, showElem, toggleElem, initSubmitEventSubmitterPolyfill, submitEventSubmitterGet} from '../utils/dom.js';
 import {htmlEscape} from 'escape-goat';
 import {showTemporaryTooltip} from '../modules/tippy.js';
 import {confirmModal} from './comp/ConfirmModal.js';
@@ -121,7 +121,8 @@ async function formFetchAction(e) {
   const formMethod = formEl.getAttribute('method') || 'get';
   const formActionUrl = formEl.getAttribute('action');
   const formData = new FormData(formEl);
-  const [submitterName, submitterValue] = [e.submitter?.getAttribute('name'), e.submitter?.getAttribute('value')];
+  const formSubmitter = submitEventSubmitterGet(e);
+  const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')];
   if (submitterName) {
     formData.append(submitterName, submitterValue || '');
   }
@@ -192,6 +193,7 @@ export function initGlobalCommon() {
 
   $('.tabular.menu .item').tab();
 
+  initSubmitEventSubmitterPolyfill();
   document.addEventListener('submit', formFetchAction);
   document.addEventListener('click', linkAction);
 }

web_src/js/features/common-issue-list.js

@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import {isElemHidden, onInputDebounce, toggleElem} from '../utils/dom.js';
+import {isElemHidden, onInputDebounce, submitEventSubmitterGet, toggleElem} from '../utils/dom.js';
 import {GET} from '../modules/fetch.js';
 
 const {appSubUrl} = window.config;
@@ -40,7 +40,7 @@ export function initCommonIssueListQuickGoto() {
   $form.on('submit', (e) => {
     // if there is no goto button, or the form is submitted by non-quick-goto elements, submit the form directly
     let doQuickGoto = !isElemHidden($goto);
-    const submitter = e.originalEvent.submitter;
+    const submitter = submitEventSubmitterGet(e.originalEvent);
     if (submitter !== $form[0] && submitter !== $input[0] && submitter !== $goto[0]) doQuickGoto = false;
     if (!doQuickGoto) return;
 

web_src/js/features/repo-diff.js

@@ -7,6 +7,7 @@ import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
 import {initImageDiff} from './imagediff.js';
 import {showErrorToast} from '../modules/toast.js';
+import {submitEventSubmitterGet} from '../utils/dom.js';
 
 const {csrfToken, pageData, i18n} = window.config;
 
@@ -57,7 +58,7 @@ function initRepoDiffConversationForm() {
       const formData = new FormData($form[0]);
 
       // if the form is submitted by a button, append the button's name and value to the form data
-      const submitter = e.originalEvent?.submitter;
+      const submitter = submitEventSubmitterGet(e.originalEvent);
       const isSubmittedByButton = (submitter?.nodeName === 'BUTTON') || (submitter?.nodeName === 'INPUT' && submitter.type === 'submit');
       if (isSubmittedByButton && submitter.name) {
         formData.append(submitter.name, submitter.value);

web_src/js/utils/dom.js

@@ -194,3 +194,20 @@ export function loadElem(el, src) {
     el.src = src;
   });
 }
+
+// some browsers like PaleMoon don't have "SubmitEvent" support, so we need to polyfill it (a tricky method): use the last clicked button as submitter
+const needSubmitEventSubmitterPolyfill = typeof SubmitEvent === 'undefined';
+
+export function submitEventSubmitterGet(e) {
+  return needSubmitEventSubmitterPolyfill ? (e.target._submitter || null) : e.submitter;
+}
+
+export function initSubmitEventSubmitterPolyfill() {
+  if (!needSubmitEventSubmitterPolyfill) return;
+  console.warn(`This browser doesn't have "SubmitEvent" support, use a tricky method to polyfill`);
+  document.addEventListener('mousedown', (e) => {
+    if (!e.target.form) return;
+    const isSubmitButton = ((e.target.nodeName === 'INPUT' || e.target.nodeName === 'BUTTON') && e.target.type === 'submit');
+    e.target.form._submitter = isSubmitButton ? e.target : null;
+  });
+}