How to submit form on command + Enter?

[bdrtsky]

Never though I would ask this question, but seems like every React version and library combo has it's quirks 😁

So I have a form like

const [lastResult, action, pending] = useActionState(login, undefined)
const [form, fields] = useForm({
    lastResult,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: loginSchema })
    },
    shouldValidate: "onBlur",
    shouldRevalidate: "onInput",
  })

<form
      id={form.id}
      onSubmit={form.onSubmit}
      action={action}
    >
    <Input
          type="email"
          key={fields.email.key}
          name={fields.email.name}
          defaultValue={lastResult?.initialValue?.email as string}
        />
        <button>Submit</button>
</form>

I want to submit form when input is focused and command + Enter pressed. Tried to listen onKeyDown and then trigger form.onSubmit but it throws error that it expects form event, not submit...

[Pouet--]

I have this feature but not with conform, I use a classic form. Anyway, the form element triggers the submit event, so you could give it a try :

const formRef = React.useRef<HTMLFormElement | null>(null);

<form ... ref={formRef} />

React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.shiftKey &&
        event.key === "Enter" &&
        document.activeElement?.nodeName === "TEXTAREA"
      ) {
        formRef.current?.dispatchEvent(
          new Event("submit", { cancelable: true, bubbles: true }),
        );
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

You may want to change the "TEXTAREA" nodeName to fit your needs. Let me know if this helps you.

[edmundhung]

There are a few ways to trigger a form submit on the dom.

• Trigger a form submit using formElement.requestSubmit()
• Dispatch a submit event manually with formElement.dispatchEvent(new SubmitEvent(...)) as @Pouet-- suggested
• Get a reference of the submit button on your form and click on it. buttonRef.current.click()