Submit form onKeyDown

[mangej]

Hi,

I want to trigger validation and submit a form on keyDown. I wrote my component like this:

  return (
    <textarea
      name="comment"
      onKeyDown={e => {
        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
          form.submit();
        }
      }}
    ></textarea>
  );

I can see that onSubmit on the form is triggered, so I get the validation but nothing is posted to the server. It works however when I press the submit-button.

Anyone got any experience from this?

[airjp73]

Hi!

It might be worth trying either the submit helper from useFormContext in this library, or Remix's useSubmit hook.

[mangej]

Thanks for your reply! :)

Sorry, all my code didn't got included in my first post. The form-variable in the code above is the form context
let form = useFormContext('hello');

It seems that I bypass the remix-validated-form validation when I use the remix submit-function submit(formRef.current) since I can post a form that isn't valid. The validation works when I press the button.

To get it to work I did a work-around, but it would be cleaner to solve it with submit :)

In the onKeyPress-function:

if (buttonRef.current) {
  buttonRef.current.click();
}

[airjp73]

What your describing sounds like it could be a bug. Would you be able to create a reproduction in code sandbox?