Description
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)