Backport #28441 by wxiaoguang Fix #28319 It only polyfills if there is no "SubmitEvent" class, so it has no side effect for most users. Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>tags/v1.21.3
@@ -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, initSubmitEventPolyfill, submitEventSubmitter} from '../utils/dom.js'; | |||
import {htmlEscape} from 'escape-goat'; | |||
import {showTemporaryTooltip} from '../modules/tippy.js'; | |||
import {confirmModal} from './comp/ConfirmModal.js'; | |||
@@ -122,7 +122,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 = submitEventSubmitter(e); | |||
const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')]; | |||
if (submitterName) { | |||
formData.append(submitterName, submitterValue || ''); | |||
} | |||
@@ -193,6 +194,7 @@ export function initGlobalCommon() { | |||
$('.tabular.menu .item').tab(); | |||
initSubmitEventPolyfill(); | |||
document.addEventListener('submit', formFetchAction); | |||
document.addEventListener('click', linkAction); | |||
} |
@@ -1,5 +1,5 @@ | |||
import $ from 'jquery'; | |||
import {isElemHidden, onInputDebounce, toggleElem} from '../utils/dom.js'; | |||
import {isElemHidden, onInputDebounce, submitEventSubmitter, 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 = submitEventSubmitter(e.originalEvent); | |||
if (submitter !== $form[0] && submitter !== $input[0] && submitter !== $goto[0]) doQuickGoto = false; | |||
if (!doQuickGoto) return; | |||
@@ -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 {submitEventSubmitter} 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 = submitEventSubmitter(e.originalEvent); | |||
const isSubmittedByButton = (submitter?.nodeName === 'BUTTON') || (submitter?.nodeName === 'INPUT' && submitter.type === 'submit'); | |||
if (isSubmittedByButton && submitter.name) { | |||
formData.append(submitter.name, submitter.value); |
@@ -106,7 +106,7 @@ function switchTitleToTooltip(target) { | |||
/** | |||
* Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element | |||
* According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event | |||
* Some old browsers like Pale Moon doesn't support "mouseenter(capture)" | |||
* Some browsers like PaleMoon don't support "addEventListener('mouseenter', capture)" | |||
* The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy | |||
* @param e {Event} | |||
*/ |
@@ -194,3 +194,24 @@ export function loadElem(el, src) { | |||
el.src = src; | |||
}); | |||
} | |||
// some browsers like PaleMoon don't have "SubmitEvent" support, so polyfill it by a tricky method: use the last clicked button as submitter | |||
// it can't use other transparent polyfill patches because PaleMoon also doesn't support "addEventListener(capture)" | |||
const needSubmitEventPolyfill = typeof SubmitEvent === 'undefined'; | |||
export function submitEventSubmitter(e) { | |||
return needSubmitEventPolyfill ? (e.target._submitter || null) : e.submitter; | |||
} | |||
function submitEventPolyfillListener(e) { | |||
const form = e.target.closest('form'); | |||
if (!form) return; | |||
form._submitter = e.target.closest('button:not([type]), button[type="submit"], input[type="submit"]'); | |||
} | |||
export function initSubmitEventPolyfill() { | |||
if (!needSubmitEventPolyfill) return; | |||
console.warn(`This browser doesn't have "SubmitEvent" support, use a tricky method to polyfill`); | |||
document.body.addEventListener('click', submitEventPolyfillListener); | |||
document.body.addEventListener('focus', submitEventPolyfillListener); | |||
} |
@@ -1,4 +1,4 @@ | |||
import '@webcomponents/custom-elements'; // polyfill for some browsers like Pale Moon | |||
import '@webcomponents/custom-elements'; // polyfill for some browsers like PaleMoon | |||
import './polyfill.js'; | |||
import '@github/relative-time-element'; |