Mark forms created for links with data-turbo-method as hidden

[willcosgrove]

I have an example of some styles breaking when a form is injected into the markup.

CleanShot.2021-09-22.at.16.29.05.mp4

You can see the actions move to the right after clicking the "Undo" link. This is because the actions are spaced out using TailwindCSS's spacing helpers, and the link has a data-turbo-method attribute which causes Turbo to create a form and insert it in the DOM before the link. So where there was previously:

<div class="space-x-3">
  <a data-turbo-method="delete" href="...">Undo</a>
  <a>Dismiss</a>
</div>

I now have:

<div class="space-x-3">
  <form>...</form> <!-- Spacing is being added unintentionally now due to this new element -->
  <a data-turbo-method="delete" href="...">Undo</a>
  <a>Dismiss</a>
</div>

---

One possible solution would be to use the hidden global attribute to indicate that the form is not meant for display. This would allow the ability to handle the styling by targeting the form[hidden] selector. Conveniently, the TailwindCSS spacing helpers already ignore elements marked as hidden when applying spacing. Here is the same scenario as above, same DOM and CSS, but with the form's hidden attribute set.

CleanShot.2021-09-22.at.16.37.15.mp4

Thanks for your time in reviewing this!

[dhh]

Good catch!