Question: Patterns for tracking form submissions

[AlanFoster]

Hi there; I was just wondering if there's any recommended patterns handling form submissions with superglue v2 so that a form's submit button can be disabled programatically on a per-form basis depending on where it's posting to? The intent is to ensure on a slow browser connection, the user doesn't continue to send additional 'submit' button press whilst the client is still awaiting the response of the first submission.

i.e. Something similar to the behavior in stimulus:

During a submission, Turbo Drive will set the “submitter” element’s disabled attribute when the submission begins, then remove the attribute after the submission ends. When submitting a

element, browsers will treat the or element that initiated the submission as the submitter. To submit a element programmatically, invoke the HTMLFormElement.requestSubmit() method and pass an or element as an optional parameter.

Or mocked:

const [isFormOneLoading, ...] = useFormState(formOne);
const [isFormTwoLoading, ...] = useFormState(formTwo);

return (
  <>
    <Form {...formOne} extras={extras} data-sg-remote>
      <SubmitButton loading={isFormOneLoading} />
    </Form>
    <Form {...formTwo} extras={extras} data-sg-remote>
      <SubmitButton loading={isFormTwoLoading} />
    </Form>
  <>
)

This seems like something that can be built by overriding the onSubmit attribute on the form, stopping propagation, and trying to reuse superglue's ujsHandlers and awaiting the result similar to the infinite scroll request - but that seems like it's reaching into the wrong layers, but let me know your thoughts 💯

[jho406]

Hi Alan.

Thanks for the question!

I'd like to add more UJS features for common patterns like that. I really like like how Turbo does it, we can do that too, please feel free to add a feature request!

For now, there's an escape outlet you can use for more finer control. You can access use your visit and remote functions from application_visit like this:

import { NavigationContext } from '@thoughtbot/superglue'

const {
  visit,
  remote,
} = useContext(NavigationContext)

Then define a handler, roughly something like this (which is what UJS does)

const handleSubmit = (event) => {
    const form = event.target
    const url = form.getAttribute('action')
    const method = (form.getAttribute('method') || 'POST').toUpperCase()
    // disable button
    remote(url, {
      method,
      body: new FormData(form),
    }).finally(() =>
      //enable button
    )
}

Then remove the data-sg-remote from the form

    <Form {...formOne} extras={extras} onSubmit={handleSubmit}>
      <SubmitButton loading={isFormOneLoading} />
    </Form>

Let me know if that helps!

[AlanFoster]

Thanks! Additionally adding event.preventDefault() and pageKey allowed that to work for my setup 👍

Full code for any other future travellers:

import { NavigationContext } from '@thoughtbot/superglue';
import { useContext, useState } from 'react';

export default function useVisitFormSubmit() {
  const [isLoading, setIsLoading] = useState(false);
  const { visit, pageKey } = useContext(NavigationContext);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsLoading(true);
    const form = event.target as HTMLElement;
    const url = form.getAttribute('action');
    const method = (form.getAttribute('method') || 'POST').toUpperCase();

    visit(url, {
      method,
      body: new FormData(form),
      pageKey,
      // dataset: {
      //   sgRemote: 'true',
      // },
    }).finally(() => {
      setIsLoading(false);
    });
  };

  const handleSubmitProps = {
    onSubmit: handleSubmit,
  };

  return [isLoading, handleSubmitProps] as const;
}

My usage

  const [isLoading, handleSubmit] = useVisitFormSubmit();

      <Form {...form} extras={extras} validationErrors={validationErrors} {...handleSubmit}>
...
           <SubmitButton {...inputs.submit} loading={isLoading} />

please feel free to add a feature request!

It would be handy to have this functionality inbuilt, but I imagine if there's a userspace solution available in the recipes page similar to the infinite scroll example that might be a good enough solution in the interim until more use cases are covered. Whatever works best for yourself works for me though! Just let me know if you'd like to rename this issue to make it a feature request, or open a separate issue etc 👍