Issue with resetting form after submission using Hotwire & Stimulus.js Rails 6

Question

I've been testing Hotwire, using the demo that was put up by DHH. I have a default rails 6 setup & I know that it re-creates the javascript folder structure from the rails 5 < asset pipeline. The issue I am having is the form will not reset the text field after submission - despite setting up the stimulus controller for using this particular action. How can I reset the form for hotwire after the form is submitted by the user ? My code is below

new.html.erb

<%= turbo_frame_tag 'new_conversation_comment', target: '_top' do %>
<%= form_with(model: [@conversation, @conversation_comment],
              data: { controller: "reset_form", action: 'turbo:submit-end->reset_form#reset' }, html: {class: 'form-inline'}) do |form| %>
    <%= form.submit 'Post', class: 'btn btn-primary mb-2', style: 'float: right;', 'data-reset_form-target': 'button' %>
  
    <div style="overflow: hidden; padding-right: .5em;">
      <%= form.text_field :content, class: 'form-control' %>
    </div>
<% end %>

_conversation_comment.html.erb

 <div class="p-1">
    <%= conversation_comment.content %>
    </div>

show.html.erb

  <div class="p-2">
     <%= turbo_stream_from @conversation %>
     <%= turbo_frame_tag 'conversation' do %>
         ....
     <% end %>
     <div class="conversation-comments-container" id="conversation_comments">
          <%= render @conversation.conversation_comments %>
     </div>
       <hr>
<%= turbo_frame_tag 'new_conversation_comment', src: new_conversation_conversation_comment_path(@conversation), target: :_top %>
</div>

assets/javascripts/controllers/reset_form_controller.js

import { Controller } from "stimulus"

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

Disclaimer : I'm using Webpack 4.0

Answer 1

Depending on setup underscore between controller name can be an issue. Replacing it with dash worked in my case.

turbo:submit-end->reset-form#reset

Answer 2

If you still need an answer, here is how you can achieve what you need:

In your controller respond to requests like that:

format.html { redirect_to conversations_url }

Note: redirect to the page where new_conversation_comment frame is defined (ie same page from where you are submitting form). Redirect will happen, but Hotwire will substitute form for you with a new one and append comment where you specified. It is a bit magic.

I suggest you to check this video:

https://gorails.com/episodes/hotwire-rails?autoplay=1

Answer 3

Disclaimer: I'm using Webpack 4.0

I ran into the same thing, also using Webpack.

The solution for me was:

1. Change the underscores to dashes, like Canbey said.

2. Move the stimulus controller from app/assets/javascripts/controllers/ to app/javascripts/controllers/ (somewhat per the stimulus docs so that webpack imported it properly — my application.js file was importing controllers from that directory rather than app/assets/javascripts .

Answer 4

A half SJR, half Hotwire approach would be this:

Working example here: https://rails-react-bootstrap.herokuapp.com/rooms

new.html.erb

<%= turbo_frame_tag 'new_note' do %>
  <%= form_with model: [@room, @note] do |form| %>
    <!-- Allow body validation error without message -->
    <div class="form-group">
      <%= form.rich_text_area :body, class: 'form-control comments', id: 'bodyText' %>
    </div><!-- .form-group -->
    <div class="form-group d-flex justify-content-center">
      <%= form.submit 'Add Note', class: 'btn btn-lg btn-tayberry btn-block' %>
    </div><!-- .form-group -->
  <% end %>
<% end %>

create_js.erb

// clear note textarea after submit
var input = document.getElementById("bodyText");
input.value = '';

notes_controller

  def create
    @note = @room.notes.create!(note_params)
    # @note.user = current_user
    respond_to do |format|
      if @note.save
        format.turbo_stream
        format.html { redirect_to @room }
        format.js
      else
        format.html { render action: 'new' }
      end
    end
  end