A Humbling TurboFrame Lesson from Yours Truly
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
- Be careful with
tag.*. It is super handy unless it isn’t. - 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.