9

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?

Andrew Hodgkinson
  • 4,379
  • 3
  • 33
  • 43

5 Answers5

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.

Andrew Hodgkinson
  • 4,379
  • 3
  • 33
  • 43
3

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

Alex
  • 16,409
  • 6
  • 40
  • 56
  • 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. – Andrew Hodgkinson May 21 '23 at 08:11
  • 1
    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". – Andrew Hodgkinson Jun 12 '23 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 https://github.com/hotwired/turbo/blob/v7.3.0/src/observers/form_link_click_observer.ts#L33-L66 and "off" means no turbo forms ever, for any reason. – Alex Jun 16 '23 at 06: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 Jun 16 '23 at 06:41
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.

kamilpogo
  • 21
  • 1
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|
zenzen
  • 1
  • 1
0

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

Americo Savinon
  • 2,569
  • 1
  • 19
  • 16
  • 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. – Andrew Hodgkinson Mar 24 '23 at 22:01