reset form in hotwire

Question

As provided in an example on the landing page for hotwire, the form clearing procedure is opaque to me and also does not work.

With rails 7.0.1 installed running ruby 3.1. the stimulus controller is set as:

import { Controller } from  "@hotwired/stimulus"      // "stimulus"

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

note: that DHH's exaple only invokes stimulus, while the pre-installed by rails hello-controller.js refers to @hotwired/stimulus. Both syntassi were attempted to no avail.

The form element is structured as follows:

  <%= turbo_frame_tag 'new_message', target: '_top' do %>
    <%= form_with(model: [ @message.room, @message ], data: { controller: "reset_form", action: "turbo:submit-end->reset_form#reset" } ) do |form| %>
        <%= form.text_field :content, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
        <%= form.submit 'send' %>
    <% end %>

I see that the submit action (its end actually) is the connection. But it is not happening, while the new record is created and the UI updated as expected.

Why is this failing & how should it be fixed?

Answer 1

The controller is named reset_form_controller.js.

However this is erroneously referenced with underscores

data: { controller: "reset_form", action: "turbo:submit-end->reset_form#reset" }

when reset form should be with dashes

data: { controller: "reset-form", action: "turbo:submit-end->reset-form#reset" }```