form_withとtableタグは相性が悪い

先日、ECサイトを開発中に商品編集ボタンを導入しました。しかし、1回目の更新は問題なく実行できたものの、2回目以降の更新を試みるとボタンが反応しなくなりました。この問題を解消するためには、ページをリロードするか、サーバーを再起動する必要がありました。

原因

原因はタイトルにもある通りform_withとtableタグの相性の悪さです。

<table>
 <%= form_with model:[:admin, @item], local: true do |f| %>
 <% end %>
</table>

上記のようにtableタグでform_withを囲ってしまうと、

formタグが外れてしまい、正しく<%= f.text_field :name %>などの記述が閉じられなくなってしまいます。

対応策

<%= form_with model:[:admin, @item], local: true do |f| %>
  <table>
    | ...      | ...      |
	<!-- その他のコード -->
    | ...      | ...      |
  </table>
<% end %>

上記のようにform_withでtableタグを囲うと

</form>でしっかり閉じられています。

まとめ

今回の不具合について、エラーメッセージは表示されず、原因の特定が難しかったです。コードの確認だけでなく、ビューページの検証ツールを使用しての確認も非常に重要であると感じました。