TurboDrive fires on forms despite being disabled in Safari 15 beta

Over the last week I’ve noticed a big uptick in JS exceptions in my app. All of the exceptions were for browsers running the Safari 15 beta. After investigating, I learned that on a form submission, Turbo Drive would fire even if the submit button had the attribute data-turbo=false

After further investigation, I discovered the submitter property of the SubmitEvent was always null. It seems Safari 15 beta now implements the SubmitEvent, but due to a bug in their implementation, they do not populate the submitter property.

Since the submitter property is null TurboDrive cannot inspect its attributes to see if it should delegate control of the form submission back to the browser.

This bug was recently patched, but it is unclear when it will hit Safari 15 beta users, it’s possible it won’t for months.

I’m going to continue looking for the most elegant workaround, but I wanted to raise the issue here in case there was an appetite to extend the existing polyfill to officially fix this unfortunate situation.

[terracatta]

If anyone is looking for a workaround, I am including this file in my JS bundle and it seems to fix the problem.

It’s basically a ES6 version of the existing polyfill (since I don’t use Typescript in my app) except it forces it on for the broken Safari. Should be safe to run on top of the existing polyfill code.

// This Polyfill is almost an exact copy of https://github.com/hotwired/turbo/blob/8eaafd4255a6619bbe3bb7f7ef4f5ceaec6a9a24/src/polyfills/submit-event.ts
// except that it fixes https://github.com/hotwired/turbo/issues/390
// This can be removed when a fixed beta for Safari 15 comes out.

"use strict";
const submittersByForm = new WeakMap;
function findSubmitterFromClickTarget(target) {
  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
  const candidate = element ? element.closest("input, button") : null;
  return (candidate === null || candidate === void 0 ? void 0 : candidate.type) == "submit" ? candidate : null;
}
function clickCaptured(event) {
  const submitter = findSubmitterFromClickTarget(event.target);
  if (submitter && submitter.form) {
    submittersByForm.set(submitter.form, submitter);
  }
}
(function () {
  if ("submitter" in Event.prototype)
    return;

  let eventType;
  // Certain versions of Safari 15 Beta have a bug where they won't
  // populate the submitter. This hurts TurboDrive's enable/disable detection.
  // See https://bugs.webkit.org/show_bug.cgi?id=229660
  if ("SubmitEvent" in window && /Apple Computer/.test(navigator.vendor)) {
    eventType = SubmitEvent;
  } else if ("SubmitEvent" in window) {
    return; // polyfill not needed
  } else {
    eventType = Event;
  }

  addEventListener("click", clickCaptured, true);
  Object.defineProperty(eventType.prototype, "submitter", {
    get() {
      if (this.type == "submit" && this.target instanceof HTMLFormElement) {
        return submittersByForm.get(this.target);
      }
    }
  });
})();

[G3z]

I’ve just encountered this issue with Safari 15.0 final (16612.1.29.41.4, 16612) on OS X 11.6