Stimulus Controller to help with Shoelace form submissions

jaredcwhite · December 26, 2020, 6:14pm

Hey, in case there are folks out there scratching their heads over how to get Shoelace Form components and Turbo working well together, I put together a Stimulus controller that seems to do the job.

gist.github.com

https://gist.github.com/jaredcwhite/196f97cafeeaf8e2d5a82c6e9d79a069

README.md

This is a [Stimulus](https://stimulus.hotwire.dev) controller which will allow a [Shoelace Form component](https://shoelace.style/components/form) to be processed and submitted by [Turbo](https://turbo.hotwire.dev).

Just wrap your `<sl-form>` control with a form tag:

```erb
<%= form_with url: "/test-submit" do %>
  <sl-form data-controller="shoelace-form">
    controls go here
  </sl-form>
<% end %>

This file has been truncated. show original

shoelace_form_controller.js

import { Controller } from "stimulus"

class ShoelaceFormController extends Controller {
  connect() {
    this.element.addEventListener(
      "sl-submit",
      this.submitForm.bind(this)
    );

    this.element.closest("form").addEventListener(

This file has been truncated. show original

shoelace_form_controller.js.rb

class ShoelaceFormController < Controller
  def connect()
    self.element.add_event_listener("sl-submit", submit_form.bind(self))
    self.element.closest("form").add_event_listener(
      "turbo:submit-end", submit_end.bind(self)
    )
  end

  def submit_form(e)
    form = self.element.closest("form")

This file has been truncated. show original

Basically it takes Shoelace’s custom submit event, copies values into new hidden form elements and submits the form, then resets the form after the Turbo response finishes. Also does a nice little “loading” state trick for the Shoelace submit button.

Topic		Replies	Views
Making external call to stimulus controller action	4	1765	November 24, 2022
Turbo form not resetting with Stimulus 2.0 Controller	1	2084	January 2, 2021
Form_with is Turbo the missing link for me?	1	729	March 16, 2021
Clickable div with Hotwire / Turbo Frames	2	1603	December 26, 2020
Can I replace a button_to to a controller with a stimulus action while maintaining the default turbo_stream functionality?	1	573	April 15, 2022

Stimulus Controller to help with Shoelace form submissions

Related Topics