Skip to content

turbo_frame_tag inside a component duplicates it #1099

Closed
@pacMakaveli

Description

@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?

Screenshot 2021-10-19 at 13 27 20

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions