onBlur Validation cancels Submit

[markusheinemann]

Laravel Precognition Plugin Version

0.7.2

Laravel Version

12.0

Plugin

React w/ Inertia

Description

I have a simple form using laravel precognition with React and Inertia. When the form is submitted, if a field is still focused that is to be validated, the preflight request is executed instead of the submit request when the submit button is clicked. The form is only submitted when the Submit button is clicked a second time.

My assumption is that the validation triggered with the onBlur event dose override the submit request. In the browser network console I can only see the preflight request and not the submit request. The submit request is fired when clicking the submit button for a second time.

This issue only occurs if an input field has an active focus and the submit button is clicked directly. When clicking somewhere on the page to lose focus on the input before submitting everything works as expected.

Steps To Reproduce

1. Create a simple form using precognition

export function MyForm() {
  const { post, data, validate } = useForm('post', '/form-destination', {
    name: ''
  });

  const submit: FormEventHandler = () {
    e.preventDefault();
    post('/form-destination', {
      onFinish: () => {
        // some actions
      }
    })
  }

  return (
    <form onSubmit={submit}>
      <label htmlFor="name">Name</label>
      <input 
          type="text" 
          name="name"  
          value={data.name} 
          onChange={(e) => setData('name', e.target.value)}
          onBlur={() => validate('name')}>
      <button type="submit">Submit</button>
    </form>
  );
}

2. Open the page
3. Click into the Name field and type something
4. Click on the submit button (the focus must still be on the name input)
   a ) preflight request is executed
   b) submit request is not executed
5. Click the submit button a second time
   a) submit request is executed

[HubertAlva]

I have the same problem with Vue + Inertia.
What im thinking is to maybe trigger form.validate on input with debounce instead of on blur or on change