Merge pull request #664 from github/bmw/block-content-capture

Ensure blocks passed to slots are captured

CHANGELOG.md

@@ -10,6 +10,10 @@
 
     *Joel Hawksley*
 
+* Fix bug where blocks passed to lambda slots will render incorrectly in certain situations.
+
+    *Blake Williams*
+
 ## 2.27.0
 
 * Allow customization of the controller used in component tests.

lib/view_component/slotable_v2.rb

@@ -226,7 +226,11 @@ def set_slot(slot_name, *args, **kwargs, &block)
         # Use `bind(self)` to ensure lambda is executed in the context of the
         # current component. This is necessary to allow the lambda to access helper
         # methods like `content_tag` as well as parent component state.
-        renderable_value = slot_definition[:renderable_function].bind(self).call(*args, **kwargs, &block)
+        renderable_value = if block_given?
+          slot_definition[:renderable_function].bind(self).call(*args, **kwargs) { view_context.capture(&block) }
+        else
+          slot_definition[:renderable_function].bind(self).call(*args, **kwargs)
+        end
 
         # Function calls can return components, so if it's a component handle it specially
         if renderable_value.respond_to?(:render_in)

test/app/components/slots_v2_block_component.html.erb

@@ -0,0 +1,22 @@
+<%= render SlotsV2Component.new(classes: "mt-4") do |component| %>
+  <%= component.title do %>
+    This is my title!
+  <% end %>
+
+  <%= component.subtitle do %>
+    This is my subtitle!
+  <% end %>
+
+  <%= component.tab do %>
+    Tab A
+  <% end %>
+
+  <%= component.tab do %>
+    Tab B
+  <% end %>
+
+  <%= component.footer(classes: "text-blue") do %>
+    <p>Footer part 1</p>
+    <p>Footer part 2</p>
+  <% end %>
+<% end %>

test/app/components/slots_v2_block_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class SlotsV2BlockComponent < ViewComponent::Base
+  include ViewComponent::SlotableV2
+end

test/view_component/slotable_v2_test.rb

@@ -248,4 +248,17 @@ def test_slots_without_render_block
 
     assert_selector("h1", text: "This is my title!")
   end
+
+  def test_slot_with_block_content
+    render_inline(SlotsV2BlockComponent.new)
+
+    assert_selector("p", text: "Footer part 1")
+    assert_selector("p", text: "Footer part 2")
+  end
+
+  def test_lambda_slot_with_missing_block
+    render_inline(SlotsV2Component.new(classes: "mt-4")) do |component|
+      component.footer(classes: "text-blue")
+    end
+  end
 end