What's the hotwire way of dealing with data-disable-with?

Question

I'm starting to use Hotwire in my Rails app and I implemented something similar to the tutorial video where a form gets submitted and refresh another part of the page. Like in the video, I had to implement my own reset form controller:

import {Controller} from "stimulus"

export default class extends Controller {
  reset() {
    this.element.reset()
  }
}

to reset the values in the form. The form looks something like:

<%= form_with(model: @invitation,
              data: {controller: "reset-form",
                     action: "turbo:submit-end->reset-form#reset"}) do |form| %>
  <!-- other form elements -->
  <%= form.submit "Invite" %>
<% end %>

which generates in button like this:

<input type="submit" name="commit" value="Invite" data-disable-with="Invite">

Because there's a data-disable-with, when you press the button, it gets disabled to avoid double-click submissions, which is great. The problem is that this.element.reset() doesn't reset it.

What's the proper way of dealing with this?

I'm not searching for a workaround, I know many, but I'm searching for the clean solution to this problem.

Is this disabling of a button caused by UJS? does it mean UJS shouldn't be used in Stimulus application?

I can re-enable the button from the reset JavaScript function but if the input button is specified like this:

<%= form.submit "Invite", data: {disable_with: "Inviting, please wait..."} %>

then the original label (value) of the button is lost and I don't have a way to re-establish it, which makes me think whatever is implementing this functionality (UJS?) it's not designed for hotwire/spa applications, and expects a full reload of the page.

I could just throw:

config.action_view.automatically_disable_submit_tag = false

and implement my own double-click prevention with a Stimulus controller, but that feels wrong. The problem is not with the attribute data-disable-with but how it was implemented.

Answer 1

Turbo has been disabling the submit button for a while now and more recently added data-turbo-submits-with as alternative to UJS data-disable-with:

# available since: turbo v7.3.0 (turbo-rails v1.4.0) thx @PaulOdeon
<%= form_with model: @invitation do |form| %>
  <%= form.submit "Invite", data: {turbo_submits_with: "Inviting..."} %>
<% end %>

Resetting the form is optional:

<%= form_with model: @invitation, data: {
  controller: "reset-form",
  action: "turbo:submit-end->reset-form#reset"
} do |form| %>
  <%= form.submit "Invite", data: {turbo_submits_with: "Inviting..."} %>
<% end %>
# NOTE: form reset is implemented as stimulus controller in the question

https://turbo.hotwired.dev/reference/attributes

---

Yes, you should just throw this in:

config.action_view.automatically_disable_submit_tag = false

it only adds data-disable-with attribute, which is UJS specific and doesn't affect Turbo.

---

However, it's not like it wasn't doable before. This is a simplified example if you want to implement your own custom behavior. To make a clear distinction here, I'm using non-turbo and non-ujs attributes (Turbo only sets and removes disabled attribute for us):

<%= form_with model: @invitation, data: {reset: true} do |form| %>
  <%= form.submit "Invite" data: {disable_append: "..."} %>
<% end %>

For simple, one shot actions you can skip Stimulus and only use Turbo events:

// app/javascript/application.js

document.addEventListener('turbo:submit-start', (event) => {
  const { detail: { formSubmission, formSubmission: { submitter } } } = event
  // disable-append or maybe disable-loading and make it spin
  if (submitter.dataset.disableAppend) {
    // TODO: handle <button> element and use innerHTML instead of value.
    // save original text
    formSubmission.originalText = submitter.value
    submitter.value += submitter.dataset.disableAppend
  }
})

document.addEventListener('turbo:submit-end', (event) => {
  const { detail: { formSubmission, formSubmission: { formElement, submitter } } } = event
  // put it back (formSubmission is the same object during form submission lifecycle)
  if (formSubmission.originalText) {
    submitter.value = formSubmission.originalText
  }
  // data-reset
  if (formElement.dataset.reset === 'true') {
    formElement.reset()
  }
})

That's pretty much how it's actually done in turbo now:
https://github.com/hotwired/turbo/blob/v7.3.0/src/core/drive/form_submission.ts#L217-L239

Answer 2

The most "Hotwire way" of replacing HTML content on the page upon a user action is to use a turbo stream response.

If I understand correctly, you want to return the form (or just the button) back to its original state after form submission.

You would wrap your form with a turbo frame, like so

<%= turbo_frame_tag dom_id(@invitation) do %>
  <%= form_with(...) %>
  <% end %>
<% end %>

Then, like @stwienert said, have your controller return a format.turbo_stream response that renders the partial/template for your form. Here is an example of a turbo_stream response adapted from the Turbo docs:

format.turbo_stream do
  render turbo_stream: turbo_stream.replace(@invitation, partial: "your/form",
    locals: { invitation: @invitation }) # or Invitation.new, perhaps
end

The goal would be for your controller response to target the DOM id of your form, such that on form submit, your data is handled appropriately and then the client receives a turbo stream response containing exactly the HTML you want to see inside your turbo_frame tag.

If you only want to replace the button, wrap only the button in the turbo_frame, give it a unique DOM id, and pass that ID to turbo_stream.replace/append/etc, e.g. turbo_stream.replace(:button_dom_id_here, partial: ...)

Answer 3

TL;DR: Add target="_top" to Your TurboFrame

For example:

<%= turbo_frame_tag @invitation, target: '_top' do %>
  <!-- Your form here -->
<% end %>

This will refresh the whole page, which is the recommended workflow (see below).

Full Answer

Does it mean UJS shouldn't be used in Stimulus application?

That's correct. UJS should not be used with Hotwire, as it's officially deprecated. The button disabling when a user submits is now part of Hotwire. You can safely remove RailsUJS. See the upgrading guide, if needed.

Submitting Form + Updating Multiple Parts of a Page

There's two ways to do this with Hotwire:

1. TurboFrames: Set the target to top (i.e. target="_top") to re-render the entire page. I would highly recommend this approach. This is what we do.
2. TurboStreams: Return multiple TurboStreams. Note that despite other answers, you don't need websockets at all. This can be done with an HTTP Post request.

Using TurboFrames (recommended)

By far the most simple way. Wrap your form in a turbo_frame tag, which you presumable have already done, but target a whole page reload using target: '_top':

<%= turbo_frame_tag @invitation, target: '_top' do %>
  <!-- Your form here -->
<% end %.

Note, by default Hotwire will only reload the current TurboFrame. Adding this extra target: '_top' will reload the whole page with Hotwire, which is a good thing and well supported by it's documentation.

Using TurboFrames

This method is much more involved. In short, you would:

1. Wrap your form and the other part of your page you wish to update in turbo_stream helpers.
2. Since the submit action on your form redirects to the show action by default, you would create a show.turbo_stream.erb file.
3. In said file, you would add the two turbo frames you would like to update.

This is overkill for most applications, in my opinion. If you'd like to go down this path, here's a full discussion on the topic including a full example from user 'kfk' near the bottom (endorsed by DHH).

Good luck! Hope that helps!

Answer 4

data-disable-with is from UJS, which isn’t really meant to work with Turbo (though this might be confusing because of efforts to smooth the transition from UJS to Turbo).

Turbo uses Websockets, while UJS leverages AJAX. The approaches are orthogonal.

When you switch from UJS to Turbo, you lose the disable-with convenience, and you will return content via turbo_stream vs. js (the UJS/AJAX way).

Resetting the form clears the input, but it doesn’t toggle the disabled attribute of the submit button.

Replacing the entire form via Websockets will give you a new form.