Rails 7: data-turbo-confirmはformタグに書く

Rails 7で、フォームの送信ボタンをクリックしたときにTurboで確認ダイアログを出す方法がなかなかわからず、すっかりはまってしまいました。

結論から言うと、Rails 7とTurboでは、data: { turbo_confirm: 'Are you sure?' }は以下のようにform_withのオプションに渡すと表示されるようになります。

<!-- Turboによる確認ダイアログが出る -->
 <%= form_with(url: check_path, data: { turbo_confirm: 'Are you sure?' }) do |form| %>
  <%= text_area_tag(
    :typotext,
    @received_string,
    class: 'form-control font-monospace'
    ) 
  %>

  <%= form.submit '送信',
    class: "btn btn-primary"
  %>
<% end %>

このときのHTMLは以下のとおりです。

<form data-turbo-confirm="Are you sure?" action="/check" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="vDRTAkY01fGxRxRd3iQtv3xfQPie28H1VPFqQjV85FwrF7P7rYQIaY152zJVOzhH7eWFmRqKW3RgQtooBsmRTg" autocomplete="off" />
      <textarea name="typotext" id="typotext" " class="form-control font-monospace col-lg mb-3" >
</textarea>

      <input type="submit" name="commit" value="送信" class="btn btn-primary" data-disable-with="送信" />
</form>

以下のように送信ボタンのform.submitにdata: { turbo_confirm: 'Are you sure?' }を付けても効きませんでした。ujsのときはここにdata: { confirm: 'Are you sure?' }を書けばよかったのですが。

<!-- Turboによる確認ダイアログが出ない -->
 <%= form_with(url: check_path) do |form| %>
  <%= text_area_tag(
    :typotext,
    @received_string,
    class: 'form-control font-monospace'
    ) 
  %>

  <%= form.submit '送信',
    class: "btn btn-primary",
    data: { turbo_confirm: 'Are you sure?' }
  %>
<% end %>

この書き方に気づいたのは、以下のStack overflowの記事でした（質問内容は直接関係ありません）。

参考: New Rails 7 Turbo app doesn't show the data-turbo-confirm alert messages don't fire (turbo-rails 7.1.0 and 7.1.1) - Stack Overflow

参考: Rails 7.0 + Ruby 3.1でゼロからアプリを作ってみたときにハマったところあれこれ - Qiita

jnchitoさんの上の記事にあるように、link_toやbutton_toの場合は、少し工夫は要るものの、data: { turbo_confirm: 'Are you sure?' }を追加できます。

しかしform.submitの場合は、送信ボタンではなく、form_withに渡す必要があります。なお、submit_tagやform.buttonの場合も同様にform_withに渡さないと効きませんでした。

参考: Rails7 で button_to の data-confirm の挙動が変わって data.confirm から form.data.confirm に変わってました - 好きなものだけ書く。ポジティブに。

なお、data-turbo-confirmはTurbo 7.1.0から利用可能になっていました。

参考: Add data-confirm behavior to turbo by virolea · Pull Request #379 · hotwired/turbo

サンプルコードでは<form>タグにdata-turbo-confirm="Are you sure?"属性が追加されているので、これが正しいようです。

<form action="/action" method="post" data-turbo-confirm="Are you sure?">
  <!-- ... -->
</form>

おたより発掘

submitボタンだとまたやり方が違うんですね！Turbo、ややこしすぎる・・・。こちらの件、僕の記事からもリンクを貼っておきました。https://t.co/wjuuhY7Ea4

— Junichi Ito (伊藤淳一) (@jnchito) January 28, 2022

関連記事

Rails 7 : rails newのフロントエンド関連オプションの組み合わせを調べてみた