Submit Button

---
// src/components/ui/forms/submit-button/SubmitButton.astro — headless primitive (see ../../README.md).
// A submit button that cannot be fired twice. The script marks it `aria-busy` and disables it after
// the form submits, and — this is the part that is easy to get wrong — it does the disabling in a
// task AFTER the submit event rather than inside it: a button disabled while its own submit event is
// still running has its name/value dropped from the payload, and in some engines cancels the
// submission outright.
//
// State is `aria-busy` + the native `disabled`; no class is touched (contract rule 4), so a theme
// styles the pending state with `[data-slot="submit-button"][aria-busy="true"]`.
// Without JavaScript it is an ordinary submit button — worth remembering that the real guard against
// a double submit is idempotency on the server. Carries Button's `data-variant` / `data-size` surface.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
};

const { variant = "primary", size = "md", class: className, ...rest } = Astro.props;
---

<button
  type="submit"
  class={className}
  data-slot="submit-button"
  data-variant={variant}
  data-size={size}
  {...rest}
>
  <slot />
</button>

<script>
  import { onReadyOnce } from "../../_once";

  // Bound once on the window, not per button: a Back navigation can restore the whole page from the
  // bfcache exactly as it was — including a button we disabled on the way out, which would otherwise
  // come back dead with no way to re-enable it.
  window.addEventListener("pageshow", (event) => {
    if (!event.persisted) return;
    for (const button of document.querySelectorAll<HTMLButtonElement>(
      '[data-slot="submit-button"]',
    )) {
      button.disabled = false;
      button.removeAttribute("aria-busy");
    }
  });

  function wire(element: HTMLElement) {
    if (!(element instanceof HTMLButtonElement)) return;
    const form = element.form;
    if (!form) return;

    form.addEventListener("submit", (event) => {
      if (element.getAttribute("aria-busy") === "true") {
        event.preventDefault(); // the second Enter / double click, arriving before navigation
        return;
      }
      // A form with `novalidate` on it — which FormErrorSummary sets — fires `submit` even when it
      // is invalid. Going busy there would disable the very button the user needs to retry with.
      if (event.defaultPrevented || !form.checkValidity()) return;
      element.setAttribute("aria-busy", "true");
      setTimeout(() => {
        element.disabled = true;
      }, 0);
    });
  }

  onReadyOnce('[data-slot="submit-button"]', wire);
</script>

import SubmitButton from "./SubmitButton.astro";

export { SubmitButton };
export default SubmitButton;