hotwire-railsのデモを参考にしたらsubmit後のリセット処理に失敗したので変更点をメモ

はじめに

この記事はhotwireの使い方の説明ではありません。
hotwireの概要にについては以下などを参照していただければと思います。

本題

hotwire-railsのデモチャットアプリ を参考に同じようなアプリを作ってみた際、submit時のリセット処理がうまく動かなかったので動くようにした変更点をメモ。
以下の内容以外は変更することなく動きました。(2021/04現在)

環境

• rails (6.1.3.1)
• webpacker (5.2.1)
• hotwire-rails (0.1.3)

デモとの違い

hotwire-rails をインストールした際にjavascriptの展開されるディレクトリが変更されていました。
予想ですがwebpackerの構成に準拠したのかと思われます。

# デモ
app/assets/javascript/
# ローカル
app/javascript/

変更点

変更点は2つあります。

1. reset_form_controller.jsの呼び方を修正
2. reset_form_controller.js、resetメソッド内のthis.elementを呼べるようにする

1. reset_form_controller.jsの呼び方を修正

そもそもフォームのリセット処理が呼ばれないので呼び方を修正

app/views/messages/new.html.erb

  <%= form_with(model: [ @message.room, @message ],
-        data: { controller: "reset_form", action: "turbo:submit-end->reset_form#reset" }) do |form| %>
+        data: { controller: "reset-form", action: "turbo:submit-end->reset-form#reset" }) do |form| %>

=> stimulus的にはreset_form_controller.jsを参照する場合、ファイル名をケバブケースにした reset-form が正しいらしい。

参考: https://stackoverflow.com/questions/65461717/issue-with-resetting-form-after-submission-using-hotwire-stimulus-js-rails-6

2. reset_form_controller.js、resetメソッド内のthis.elementを呼べるようにする

サブミット後にformのリセットをしようとしているがボタンが戻らないのでform要素をjsで参照できるように修正

app/javascript/controllers/reset_form_controller.js

+ import Rails from "@rails/ujs"
  import { Controller } from "stimulus"

  export default class extends Controller {
    reset() {
+     Rails.enableElement(this.element)
      this.element.reset()
    }
  }

=> こちらは暫定対応として捉えてもらったほうがいい？
=> どうやらrails/ujsの既存の問題らしい。

参考: https://discuss.hotwire.dev/t/reseting-disabled-buttons-for-a-submitted-form-using-stimulus/1962

最後に

hotwireの感想

hotwireまだまだ勉強中ですが フロントエンド == js で何でもやろうをなくしてくれそうで、しがないサーバーサイドエンジニアの私としてはとても嬉しかったりしています。
今後のhotwireの成長には期待しています。