The following stimulus controller
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
let that = this;
that.element.addEventListener('change', _.debounce(that.handleChange, 500))
}
handleChange(event) {
event.preventDefault()
event.target.form.requestSubmit()
}
}
is referenced from the Rails application.js
file
import { Application } from "@hotwired/stimulus"
import "controllers"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }
and is rerefenced with its digest in the header of the page.
<link rel="modulepreload" href="/assets/controllers/buttonless-e2d65585b825be08ee9863e11720e29cf389075ede5ba34fb01abe0d03412d97.js">
However, the form on the page
<%= turbo_frame_tag dom_id(@garment, :intl) do %>
<%= form_with(model: Measure.new, data: { controller: "buttonless" }) do |form| %>
<%= form.hidden_field :garment_id, value: @garment.id %>
<%= form.hidden_field :sequence, value: @next_sequence %>
<%= form.text_field :value %>
<% end %>
<% end %>
and renders as
<form data-controller="buttonless" action="/measures" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="[..]IoV1GW4g" autocomplete="off">
<input value="1" autocomplete="off" type="hidden" name="measure[garment_id]" id="garment_id">
<input value="1" autocomplete="off" type="hidden" name="measure[sequence]" id="measure_sequence">
<input type="text" name="gmeasure[value]" id="measure_value">
</form>
The browser console does not register any errors, whereas a view-source
on the page does not reference the data controller
<form action="/measures" accept-charset="UTF-8" method="post">
I am not certain what is at play for this point
clicking in the field, entering data, then tabbing out does not register any submission as expected. What is mistaken here?