withFormAutoSubmit

extension

Installation

npx jsrepo add github/reatom/reusables withFormAutoSubmit

Copy the source code below and save it to the specified file path in your project.

with-form-auto-submit.ts

import {
  action,
  isAbort,
  sleep,
  take,
  throwAbort,
  wrap,
  type Action,
  type Form,
  type FormInitState,
} from '@reatom/core'

interface FormAutoSubmitOptions {
  debounceMs?: number
}

interface FormAutoSubmitExt {
  waitAutoSubmit: Action<[], Promise<void>>
}

/**
 * Form extension that automatically submits after changes settle.
 *
 * Returns a `waitAutoSubmit` action that should be called in
 * `reatomFactoryComponent` or a route loader. The action loops forever, waiting
 * for form changes with `take`, debouncing, and submitting.
 *
 * @example
 *   const form = reatomForm({ name: '' }, { onSubmit }).extend(
 *     withFormAutoSubmit({ debounceMs: 500 }),
 *   )
 *   // in reatomFactoryComponent or route loader:
 *   form.waitAutoSubmit()
 */
export const withFormAutoSubmit =
  ({ debounceMs = 300 }: FormAutoSubmitOptions = {}) =>
  <T extends FormInitState>(form: Form<T>): FormAutoSubmitExt => {
    return {
      waitAutoSubmit: action(async () => {
        try {
          while (true) {
            await wrap(take(form, () => form.focus().dirty || throwAbort()))

            await wrap(sleep(debounceMs))
            if (!form.focus().dirty) continue

            const newValues = form()
            form.submit()
            await wrap(sleep())
            form.init(newValues)
          }
        } catch (error) {
          if (!isAbort(error)) throw error
        }
      }, `${form.name}.waitAutoSubmit`),
    }
  }

Documentation

withFormAutoSubmit

Auto-submits a Reatom form after the user stops changing fields for a short time.

`withFormAutoSubmit(options?)`

Creates a form extension that returns a waitAutoSubmit action. Call it in reatomFactoryComponent or a route loader — it loops forever, watching for form changes with take, debouncing, and submitting.

Parameters

Parameter	Type	Description
`debounceMs`	`number`	Debounce delay in ms (default: `300`)

Returns

Extension object with:

waitAutoSubmit: Action<[], Promise<void>> — starts the auto-submit loop. Call in reatomFactoryComponent or a route loader.

Example

import { reatomForm } from '@reatom/core'
import { withFormAutoSubmit } from '#reatom/extension/with-form-auto-submit'

const profileForm = reatomForm(
  { name: '', email: '' },
  {
    onSubmit: async (state) => {
      await api.saveProfile(state)
    },
  },
).extend(withFormAutoSubmit({ debounceMs: 500 }))

// in reatomFactoryComponent or route loader:
profileForm.waitAutoSubmit()

Example

import { reatomForm } from '@reatom/core'

import { withFormAutoSubmit } from './with-form-auto-submit'

// Auto-submit when the user stops typing for 400ms.
const profileForm = reatomForm(
  { name: '', email: '' },
  {
    onSubmit: async (state) => {
      console.log('Submitting', state)
    },
  },
).extend(withFormAutoSubmit({ debounceMs: 400 }))

// Call in reatomFactoryComponent or a route loader:
profileForm.waitAutoSubmit()