ページを更新しないとform_withのボタンが押せない

rails6.1の環境でform_withを使った情報入力フォームを作成したときのことです。

フォームに付けた <%= f.submit '送信', class: "btn btn-info" %>のボタンをクリックしてもページ遷移せず、ページを更新したらなぜか押せるようになるという現象が起こっていました。

どうしてだろうと思い、form_withについて調べたり、
urlが違うのか？とか、単語を打ちミスしてるのか？とか
思いながら原因を探っているとすごく単純なミスを見つけました。

こちらが不具合が出ていた時の記述です。

    <h1>注文情報入力</h1>
    
<!--ここのdivの位置が…-->
<div>
<%= form_with model: @order, url: '/orders/confirm' do |f| %>
  
    <h2>支払方法</h2>
    <div class="row d-flex flex-column">
      <div class="col">
        <%= f.radio_button :payment_method, "credit_card" %>
        <%= f.label :payment_method, "クレジットカード" %>
      </div>
      <div class="col">
        <%= f.radio_button :payment_method, "transfer" %>
        <%= f.label :payment_method, "銀行振込" %>
      </div>
    </div>
  </div>
：
：
<% end %>

↓修正後はこっち。修正したのは1箇所のみです。

<h1>注文情報入力</h1>
<%= form_with model: @order, url: '/orders/confirm' do |f| %>
<!--正しくはここだった-->
  <div>
    <h2>支払方法</h2>
    <div class="row d-flex flex-column">
      <div class="col">
        <%= f.radio_button :payment_method, "credit_card" %>
        <%= f.label :payment_method, "クレジットカード" %>
      </div>
      <div class="col">
        <%= f.radio_button :payment_method, "transfer" %>
        <%= f.label :payment_method, "銀行振込" %>
      </div>
    </div>
  </div>
：
：
<% end %>

単純にform_withの内側で要素を囲っていてほしかった<​div><​/div>の片方が外に出てしまっていたようです。
分かりやすく書くと、こういう形になっていました。

  <div>
<%= form_with model: @order, url: '/orders/confirm' do |f| %>
  </div>
<% end %>

原因をあれこれ探した末に頭を抱えていたところ、ふいに見つけたのですが、発見した瞬間は思わずクスッと笑ってしまいました。

不具合の原因を行き当たりばったりで探そうとするのはよくないですね。
余計な作業に時間を取られてしまったので、メソッドやオプションの意味も理解して自分で原因の仮説をしっかりと頭で考えられるようにしなければと感じました。

ただ、まだなぜページを更新したらボタンが押せるようになったのかが謎です。
また余裕のある時に検証してみたいです。