20

In Rails 7, Turbolinks is replaced by Hotwire / Turbo. This patches up web links so that they become AJAX-style requests just like Turbolinks did, but also patches up forms. On the whole, we found this broke swathes of our application.

  • Forms that already had some kind of JS behaviour attached conflicted.
  • Standard Rails error handling idioms - "set the flash and render :new/render :edit" - break, astonishingly; one must add status: :unprocessable_entity and cross fingers.
  • If the controller handling a form submission redirects to a URL that includes a patch anchor (...#foo), Turbo strips it.

In the end, there's only so much data: {turbo: false} it makes sense to scatter all over your code base. Worse, we're using SimpleForm, so this becomes the even-more-cumbersome html: {data: {turbo: false}}.

Is there a way to _globally disable Turbo just for forms (ideally all forms, whatever their origin - just leave the <form> tag and everything inside it completely alone please) but leave the rest of its behaviour unchanged?

5 Answers 5

20

Wish granted, although, undocumented. Available since turbo v7.2.0 (turbo-rails v1.3.0).

// app/javascript/application.js

Turbo.setFormMode("on" | "off" | "optin")

"on" - default - Turbo forms all the time. Use data-turbo="false" to disable turbo on individual forms.

"off" - No turbo forms ever. data-turbo="true" is ignored.

"optin" - No turbo forms unless you insist. Use data-turbo="true" to enable turbo on individual forms.


https://github.com/hotwired/turbo/pull/419

6
  • Worrying that it's not documented, since it could be removed without warning, but it's very clear from the feature PR what was happening and there seemed a clear understanding of what was going on. So, good stuff! It's sort-of an "official" feature. Thanks. Commented May 21, 2023 at 8:11
  • 2
    WARNING on this: If you use "off", it disables ALL Turbo extensions, not just "data-turbo" for forms - it also disables things like using "data-turbo-method" on plain links. We found that out the hard way! The correct solution in that case is "optin". Commented Jun 12, 2023 at 22:51
  • @AndrewHodgkinson that seems annoying. to clarify a bit, when using data-turbo-method (and some other turbo attributes), Turbo creates a form on the fly which is then submitted github.com/hotwired/turbo/blob/v7.3.0/src/observers/… and "off" means no turbo forms ever, for any reason.
    – Alex
    Commented Jun 16, 2023 at 6:31
  • on the other hand, maybe that should be a bug, since the form still should happen and then be submitted as HTML and not TURBO_STREAM.
    – Alex
    Commented Jun 16, 2023 at 6:41
  • 1
    Does Turbo.setFormMode('optin') affect plain GET links that have data: { turbo: true } or data: { turbo_method: :get }? (I'm expecting a link to send a turbo request, and it is sending as text/html or */*. I've also tried adding format: :turbo_stream to the link params, and adding defaults: { format: :turbo_stream } to the route. No dice, the controller does not process the request as turbo.)
    – nimmolo
    Commented Nov 6, 2023 at 19:35
3

I posted this Q&A on Stack Overflow as I couldn't find any other solutions out there. Clearly, there are numerous shortcomings and I would much prefer to see a simple configuration flag for Turbo that would make it ignore forms - this would be an overwhelmingly preferable approach.

I still don't have a full solution either way, because forms generated internally by Rails for e.g. a link_to(...method: delete) are still a problem, but I did work around some of it using some monkey patching.

On the one hand there are Rails forms:

  • Apparently, a data-turbo attribute's value apples to that node and all children so one can wrap e.g. a Rails-generated 'dynamic' form from e.g. a link_to(...method: delete) in a DIV with that attribute set and, at least, work around those problems on a case-by-case basis - though note, I'm having trouble making this work in some cases still.
  • If you have a lot of these, though, that's going to be intrusive and ugly, so it'd still be nice to have a way to have Turbo just ignore forms completely.

On the other hand there are SimpleForm forms:

  • SimpleForm provides no way to globally configure data attributes that will be added to form elements that it constructs. Previous requests for this in GitHub issues have so far been explicitly refused.
  • SimpleForm appears to provide no way to configure a wrapper that would go around the form as a whole, only custom wrappers for inputs within a form. So we can't easily just e.g. write a wrapper DIV as mentioned above.

I happened to be involved in a gem called Hoodoo that provides monkey patching facilities that lets you write patch modules which are more like subclasses - super is available to call up to the patched implementation - and, further, patches can be enabled or disabled dynamically and easily. Hoodoo is actually a Rack application service framework, so this is something of a sledgehammer - I always intended to one day extract this into its own gem, but at the time of writing, I have not got around to it (and several years have gone by) - but we can require just the part we need and ignore the rest.

Here, I patch SimpleForm's builder methods. These just call Rails' form helpers under the hood, so I might have a go at patching lower down in Rails instead, but anyway, the following worked.

In your Gemfile, declare the Hoodoo dependency but don't load all of its component parts as you won't want most of them.

# Hoodoo's monkey patch module is useful sometimes:
# https://rubygems.org/gems/hoodoo
#
# MUST use 'require: false' so that the Rack components of Hoodoo middleware
# do not get activated; this is a Rails app, not a Hoodoo service!
#
gem 'hoodoo', '~> 2.12', require: false

...then write something like config/initializers/simple_form_monkey_patch.rb which looks something like this:

require 'hoodoo/monkey'

module SimpleFormMonkey
  module InstanceExtensions
    def simple_form_for(record, options = {}, &block)
      modified_options = {html: {data: {turbo: false}}}
      modified_options.deep_merge!(options)

      super(record, modified_options, &block)
    end
  end
end

Hoodoo::Monkey.register(
  extension_module: SimpleFormMonkey,
  target_unit:      SimpleForm::ActionViewExtensions::FormHelper
)

Hoodoo::Monkey.enable(
  extension_module: SimpleFormMonkey
)

...that'll do it. This has some risk as we're patching things which are - in terms of the module name & nesting - technically private to SimpleForm, but the method signature itself is at least public. You could patch ActionView::Helpers::FormHelper with an override for form_for instead, if you wanted to go lower level and patch an API that's been stable for a very long time. The code would be almost identical as the method signatures are the same.

2

I used Javascript to solve this problem:

  document.querySelectorAll('form').forEach(function (el) {
    el.dataset.turbo = false
  })

No more flaky system tests due to randomly missing flash messages/alerts after form submissions and Devise also works perfectly again.

1
  • How do you make sure that this runs after Turbo itself has already hooked into forms? Commented Dec 8, 2022 at 21:57
1

You can disable turbo drive by adding these lines to your application.js:

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

More info: https://turbo.hotwired.dev/handbook/drive#disabling-turbo-drive-on-specific-links-or-forms

1
  • 1
    That turns off Turbo globally. The question was about turning off Turbo for just forms, since it causes many problems there. My own self-answered response gives a robust low-level way to do that for SimpleForm, while @kamilpogo gives a JavaScript-based solution that uses fewer lines of code but makes assumptions about order of execution that might not always work out in practice - the JS patch would always have to run somehow before Turbo scanned the document. Commented Mar 24, 2023 at 22:01
0

@kamilpogo your solution worked like a charm! ty!!! currently learning and following this GoRails tutorial before i ran into some turbo trouble trying to render "Thanks!" for anyone else out there.

basically, i added the javascript to in /layouts/application.html.erb like below:

<script>    
    document.querySelectorAll('form').forEach(function (el) {    
                el.dataset.turbo = false    
    })    
</script>    
<script src="js-bootstrap"></script>    
  </body>    
</html>    

UPDATE: comments in the videos have a different work around by setting turbo to 'false' and local to 'true' inside the form:

form_with model: @user, url: sign_up_path, local: true, data: { turbo:false } do |form|

Not the answer you're looking for? Browse other questions tagged or ask your own question.