はじめに

この記事は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つあります。

reset_form_controller.jsの呼び方を修正
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の成長には期待しています。

はじめに

本題

環境

デモとの違い

変更点

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

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

最後に

hotwireの感想

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