turbo_frame_tag inside a component duplicates it

[pacMakaveli]

Ok, so I'm not sure if the title makes sense. Hopefully the code will.

When rendering a component which has a turbo_frame_tag inside it, ViewComponent (or Turbo?) will render the contents twice.
Once inside a turbo_frame_tag as expected, and again, with whatever's inside the turbo_frame_tag

Note: The content of the component html doesn't matter from my testing. I initially thought it might be another turbo frame tag or component conflicting, since my VC is quite complex.

- achievements.each do |achievement|
  = turbo_frame_tag(achievement.event) do
    = render(Provider::TrophyComponent.new(trophy: achievement))

= turbo_frame_tag(@trophy) do

  .cell-auto.card.--with-image data-controller='provider--trophy-component--trophy-component' id=dom_id(@trophy)
    .row.items-stretch
      .cell-auto.card class="#{ @trophy.cover.attached? ? '' : 'animate-pulse' } #{ @trophy.is_a?(XBOX::Trophy) ? 'w-60' : 'w-38' }"
        = helpers.lazy_image_tag(@trophy.cover, class: 'w-full h-full rounded-md object-cover') if @trophy.cover.attached?

To fix this, I have to extract the component inside a rails partial and wrap it inside a turbo_frame_tag in there, instead of the VC.

- achievements.each do |achievement|

  = turbo_frame_tag(achievement.event) do
    = render(partial: 'fix', locals: { achievement: achievement }, cache: false)

= turbo_frame_tag(achievement.event) do
  = render(Provider::TrophyComponent.new(trophy: achievement))

Expected behavior

The ViewComponent shouldn't render the contents twice.

System configuration

Rails version:
ruby -Rails 6.1.4.1
Ruby version:
ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-darwin20]
Gem version:
view_component (2.40.0)
turbo-rails (7.1.0)

[boardfish]

Hey @pacMakaveli! It'd be really helpful if you could provide us with a failing test case or a replica of the issue. If you want to get started with the latter, I'd recommend doing the following:

rails new --minimal view_component-1099
cd view_component-1099
bundle add view_component
rails g component TurboFrameTag

A failing test case is preferable, but either way, a replica of the issue in isolation will be helpful in diagnosing it. Thanks!

[xkraty]

@pacMakaveli I've run into the same issues as well if I remember right it come from the known form_for issue linked in the docs.

Any way a work around we are using is to write the turbo-frame id="myid" tag instead of using the turbo_frame_tag helper.

Chris

[boardfish]

Part of me wonders if #1090 is also linked to this. All of these see us using helpers that are available to Action View without us having to chain off helpers.

Would calling helpers.turbo_frame_tag instead of turbo_frame_tag fix this in the short term?

[HashNotAdam]

Would calling helpers.turbo_frame_tag instead of turbo_frame_tag fix this in the short term?

Afraid not, however, @xkraty's solution works a treat.
Either:

<turbo-frame id="some_id">
  Some content
</turbo-frame>

Or:

<%= tag.turbo_frame(id: "some_id") do %>
  Some content
<% end %>

[swanson]

Adding include Turbo::FramesHelper in your component class seems to work as well: you can then call turbo_frame_tag directly instead of proxying through helpers

[pacMakaveli]

@swanson it didn't work for me. Nor did the helpers.turbo_frame_tag
However, @HashNotAdam's solution works a treat! Thanks a bunch to everyone that chimed in.

So, if you have issues with the ViewComponent duplicating your content, or messing with the HTML rendering, tag.turbo_frame fixes it.

[joelhawksley]

@pacMakaveli mind writing a docs PR to reflect this?