微炭酸ログ

Ruby や Rails を中心に。

【Rails】フォーム内でプレビューボタンを一緒に作るときは、data: { disable_with: false } も使う

formaction を使ってプレビュー機能を実装したりすると思いますが、だいたい formtarget: '_blank' も一緒に使うと思います。

formtarget: '_blank' を使うと、プレビューは別タブで表示されます。
また元のタブに戻ってフォームを送信する、という操作を期待しているわけですね。

ただ、元のタブに戻ると送信ボタンが disabled になっている場合があります。

これは、Rails のデフォルト設定(config.action_view.automatically_disable_submit_tag)により、自動で data-disable-with="xxxx" が付与される、というのが原因です。

参考:Rails アプリケーションを設定する - Railsガイド

そもそもこれ自体は二重サブミットを防ぐための有用な設定ですが、プレビューボタンを一緒に作るときは、data: { disable_with: false } でこの設定を局所的に無効化するのがよさそうです。

= form_with model: @book

  -# ...

  %button{ type: 'submit', formaction: book_previews_path, formtarget: '_blank' } プレビューする
  -# NOTE: プレビューボタンがあるため、data: { disable_with: false } で無効化する
  = f.submit '登録する', data: { disable_with: false }