Implementing Confirmation and Disable Controllers

[jacobdaddario]

I'm making this PR in response to this discussion. So far I've managed to get these controllers working in isolation, but I'm having trouble with getting them to play well together.

I wanted to open this as a draft PR to see thoughts on how to prevent the submit event from propagating to other controllers if the confirmation is declined, regardless of invocation order. I'm considering combining the controllers into a single form_controller, but I'm not sure if this is appropriate. Additionally, this doesn't solve the event propagation issue for other controllers listening to submit.

[jacobdaddario]

Realized I could solve the problem with a custom event (duh). So I pushed some changes that allow the controllers to work well together (button is no longer disabled forever when confirmation is declined).

Still not 100% happy that the programmer would manually have to add data: { action: "submitcanceled->disable#enable } to the form, but I couldn't find a better way to automatically add the action without coupling the confirmation_controller logic and disable_controller logic together. Also not 100% happy with the names I gave things.

Maybe this can be improved some more, but for now I'm marking this as complete.

[dhh]

Hmm, yeah, I think we have to find a path, even if it requires extending Stimulus, where all you have to do is add data-controller="std--confirm_submit".

[jacobdaddario]

I think that I have an idea. I may have to wait until this weekend to try it out though.

[adammiribyan]

Perhaps provide a default confirmation message unless this.hasMessageValue?

[dhh]

Please reopen if you come up with a solution.

[caged]

Posting this for anyone landing here from google or the hotwire discussion board. You can workaround this by adding the code below in a file and importing it. This is only for the delete confirmation.

document.addEventListener("turbo:load", function () {
  document.querySelectorAll("[data-confirm]").forEach(function (element) {
    element.addEventListener("click", function (event) {
      if (!confirm(this.getAttribute("data-confirm"))) {
        event.preventDefault();
      }
    });
  });
});

[dhh]

These features are now part of Turbo 7.1. So if you use that, you won't need to implement them yourself. data-turbo-confirm for confirms and submit buttons are automatically disabled.

[caged]

<%= button_to @course, method: :delete, data: { "confirm": "Are you sure?", "turbo-confirm": "Are you sure?"}, class: 'btn-danger' do %>
Delete
<% end %>

import "@hotwired/turbo-rails";
import "@hotwired/stimulus";
import "./controllers";

@dhh Thanks for the update. I'm on freshly created Rails 7.0.0 generated with --j esbuild, and have installed @hotwired/turbo-rails and pinned to ^7.1.0. I tried both data-confirm and data-turbo-confirm and I'm not getting the confirmation.

I created an example app using Rails 7.0.0 and the defaults and wasn't able to see any confirmation. You can find that repo here: https://github.com/caged/book-store. (load it up and go to /books).

Let me know if I can provide more info (or if I'm mistaken). Happy to move this to a new issue if need be.

[james-em]

@caged Hi there

Took me a while to figure out as well. It seems that link generated this way

= link_to project_path(project), class: "btn btn-outline-danger btn-sm mx-1", method: :delete, data: { "turbo-confirm": "Are you sure?",  } do
              %i.fas.fa-trash

are now being processed as GET request and that is the reason why the turbo-confirm is being ignored. Adding an extra

"turbo-method": "delete"

resolves the issue. My guess is that the data-method attribute functionnality used to come from rails ujs

[mhulbert85]

@caged try adding the data-turbo-confirm to button_to's form attribute, works ok for me.

<%= button_to 'Delete', some_path, form:{ data:{"turbo-confirm": "Are you sure?"}}, method: "delete" %>

I tried it out as a form attribute and it works fine as well .

<form action="<%= some_path %>" data-turbo-confirm="Are you sure?" method="delete">  
  <button type="submit"> Delete </button>
</form>

[caged]

@james-em @mhulbert85 Thanks for the suggestions! 🙏🏻 I was able to get it to work. It appears that the nuance is that you need to add turbo-confirm to the form: {data: {}} attribute and not simply on the button data:{} attribute.

The docs might need an update to address this: https://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to

[ramses-lopez]

Leaving this in case folks arrive here from google:
https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#replacements-for-rails-ujs-functionality