tagged-events extension breaks form submission in some cases

[pbirkants]

Past Issues Searched

• I have searched open and closed issues to make sure that the bug has not yet been reported

Issue is a Bug Report

• This is a bug report and not a feature request, nor asking for self-hosted support

Using official Plausible Cloud hosting or self-hosting?

Self-hosting

Describe the bug

When using the tagged-events script extension for custom form events, form submission is broken if the tagged form contains an element with either id="submit" or name="submit" attributes, the following error is output in the console:

pls.js:1 Uncaught TypeError: n.submit is not a function
    at Object.a [as callback] (pls.js:1:3389)
    at r.onreadystatechange (pls.js:1:867)

analytics/tracker/src/customEvents.js

Lines 123 to 136 in 3d656ae

	function handleTaggedFormSubmitEvent(event) {
	var form = event.target
	var eventAttrs = getTaggedEventAttributes(form)
	if (!eventAttrs.name) { return }
	event.preventDefault()
	var formSubmitted = false
	function submitForm() {
	if (!formSubmitted) {
	formSubmitted = true
	form.submit()
	}
	}

This behaviour is also mentioned in the MDN docs:

If a form control (such as a submit button) has a name or id of submit, this method will mask the form's submit method.

Additionally, since form.submit() is used to trigger the form action, the name/value of the submit button clicked by the user is not included in the request payload, which might also cause some unexpected issues when processing data in the backend.

Expected behavior

When adding custom events via tagged-events, the injected form submission event handler should behave transparently and not require the form elements or back-end processing to be modified in any case.

One possible solution would be to instead use form.requestSubmit(event.submitter) (see docs for requestSubmit()), however, that would also require some additional logic to prevent the submit event from firing recursively.

If a reasonable fix is not trivial, perhaps the documentation could at least be updated to include a warning about these edge cases.

Screenshots

No response

Environment

- OS: Debian
- Browser: Firefox
- Browser Version: 110.0.1

[aerosol]

Thank you for a beautiful report @pbirkants 🙌 - we'll update the docs for now, before coming up with a viable solution to the limitation.

[MLNW]

I'm not sure if this is the right place but I'm having trouble with form submission as well. Specifically in a SvelteKit application that progressively enhances the form via use:enhance. I noticed that the form submits a second time, leading to an unwanted page reload, after a short delay. I traced it back to this static timeout in the Plausible Analytics tracker:

analytics/tracker/src/customEvents.js

Line 138 in 3d656ae

setTimeout(submitForm, 5000)

I would like to keep control over the form submission as I'm otherwise not able to handle errors in my form submission. The proposed expected behaviour sounds on point in this regard.

Is there maybe a workaround for now?

EDIT: I found a work around in the documentation: https://plausible.io/docs/custom-event-goals#trigger-custom-events-manually-with-a-javascript-function

I can then use the function to send an event in a use:enhance function.