Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested form with turbo-frames cannot use links with data-method="delete" #89

Closed
allengreer-latero opened this issue Jan 22, 2021 · 3 comments

Comments

@allengreer-latero
Copy link

Related discussion I found: #33, #50

If I have the following in a partial view:

= form_with model: @parent do |form|
  = form.fields_for :users, user do |user_form|
    = turbo_frame_tag dom_id(user) do
      = user_form.label :first_name
      = user_form.text_field :first_name
      = link_to 'Delete', users_path(user), method: :delete  <!-- (1) -->
                              <!-- OR -->
      = button_to "Delete", users_path(user), method: :delete <!-- (2) -->

& the following model

class Parent < ApplicationRecord
  has_many :users
  accepts_nested_attributes_for :users
end

& the following controller

class UsersController < ApplicationController
  def destroy
    respond_to do |format|
      format.turbo_stream do
        user = User.find(params[:id]).destroy
       # Must match the dom_id in the view
        render turbo_stream: turbo_stream.remove("users_#{user.id}")
      end
  end

When attempting to delete the nested user frame through the following:

  1. link_to (1):
  • This works with Rails UJs as the data-method="delete" is POSTed to the users#destroy
  • This is troublesome as we are using a <a> tag to perform a destructive action. As mentioned, this is a no-no for a11y compliance.
  1. button_to (2):
  • Translated to an <input> tag, as there is already a parent form tag present
  • On submission: this sends a submit request to parents#destroy action
  • Is a11y compliant, but is incompatible with turbo.

Is there a way to do this natively in turbo, or will have to sprinkle in some Stimulus to wire this up correctly.
Or should I not be trying to use a nested form with a turbo tag in such a way?

@dhh
Copy link
Member

dhh commented Jan 30, 2021

You can't have nested forms, that's right. So that's a no go. It's an interesting conflict. If you're set on this particular UI, I'd probably hook up a button to a stimulus controller. Agree it's not graceful though.

@dhh dhh closed this as completed Jan 30, 2021
@fffx
Copy link

fffx commented Feb 4, 2021

How about?

button_tag "Delete" , formaction: users_path(user), formmethod: :delete

@andrespch
Copy link

@allengreer-latero how did you end up solving this? I was trying @dhh s suggestion, but I don't know how I can trigger a post request from my stimulus controller that will result in my turbo frame being refreshed. I'm relatively new to rails development, any pointers are massively appreciated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

4 participants