There’s nothing worse than code that’s almost right…

I was helping debug an issue that came up with a client. They had a section on the page that would dynamically update when you selected a different option. This was a perfect situation for a TurboFrame:

<%= turbo_frame_tag :cool_stuff do %>
  <blink>Cool Stuff</blink>
  
  <a href="cool_stuff?load=more">Load more suff!</a>
<% end %>

Over time this moved into a ViewComponent, and eventually stopped working. (Far) too long of a story made short, ViewComponent didn’t expose the turbo_frame_tag helper, so it was switched to use tag instead. Yeah, tag.turbo_frame_tag id: :cool_stuff.

Why This Was Wrong

The tag helper is great. It will accept anything off it and turn it into a tag. If you use a custom element you can just do a tag.foo to get a <foo> tag.

Unfortunately, when our CoolStuff™️ was migrated from a partial to a ViewComponent, they used tag.turbo_frame_tag, which created a <turbo-frame-tag> tag, not a <turbo-frame> tag. 🤦🏻‍♂️

Take-aways

1. Be careful with tag.*. It is super handy unless it isn’t.
2. Read your code. No. Stop. Really read your code.

It is still shocking how often when I am truly stuck, the solution is right in front of me.