Opting out of stream responses on a per form basis

6

I recently came across this issue and ended up adding support for data-turbo-stream="false" by using the following document wide event listener:

document.addEventListener("turbo:before-fetch-request", (event) => {
  if (event.target.dataset["turboStream"] == "false")
    event.detail.fetchOptions.headers["Accept"] = "text/html, application/xhtml+xml"
})

You use it like so:

<form ... data-turbo-stream="false">...</form>