Components

Auto Submit

GitHub

A Stimulus controller to auto-submit forms.

Installation

  1. Install the package

    Terminal
    $ yarn add @stimulus-components/auto-submit

  2. Register the controller in your application

    app/javascript/controllers/index.js
    import { Application } from '@hotwired/stimulus'
import AutoSubmit from '@stimulus-components/auto-submit'

const application = Application.start()
application.register('auto-submit', AutoSubmit)

Usage

app/views/todos/edit.html.erb
<%= form_with model: @todo, data: { controller: 'auto-submit' } do |f| %>
  <div class="field">
    <%= f.label :description %>

    <!-- With custom event! -->
    <%= f.text_field :description, data: { action: 'keyup->auto-submit#submit' } %>
  </div>

  <div class="field">
    <%= f.label :completed %>
    <%= f.check_box :completed, data: { action: 'auto-submit#submit' } %>
  </div>

  <%= f.submit %>
<% end %>

Configuration

AttributeDefaultDescriptionOptional
data-auto-submit-delay-value150Delay (in ms) before actually submit the form. (0 to disable)✅

Extending Controller

You can use inheritance to extend the functionality of any Stimulus component:

app/javascript/controllers/auto_submit_controller.js
import AutoSubmit from "stimulus-auto-submit"

export default class extends AutoSubmit {
  static values = {
    delay: {
      type: Number,
      default: 1000, // You can change the default delay here.
    },
  }

  connect() {
    super.connect()
    console.log("Do what you want here.")
  }
}

This controller will automatically have access to targets defined in the parent class.

If you override the connect, disconnect or any other methods from the parent, you'll want to call super.method() to make sure the parent functionality is executed.