Async validation submiting the form onchange

[benjammartin]

Describe the bug and the expected behavior

Hey there,

I'm using NextJS. I'm currently working on validating the uniqueness of the usernames for my users. I found an example of how to do this using async validation in the documentation at https://conform.guide/validation

I've run into an issue where, upon initially focusing on the input, everything seems to work fine. However, when I subsequently blur the input, the form seems to submit right away without me even clicking on the submit button. Even more problematic is that when I refocus on the input, any change triggers the form to be submitted.

Conform version

1.1.5

Steps to Reproduce the Bug or Issue

1. Navigate to the Form: Open your browser and navigate to the form where the username validation is implemented.

2. Focus on the Username Input Field: Click on the username input field to focus on it.

3. Blur the Input Field: Click outside the username input field to trigger the blur event. Observe if the form submits automatically without clicking the submit button.

4. Refocus on the Username Input Field: Click back on the username input field to focus on it again.

5. Make Changes to the Input Field: Make any change (e.g., add or remove a character) in the username input field. Observe if the form submits again upon making this change.

What browsers are you seeing the problem on?

No response

Screenshots or Videos

https://github.com/edmundhung/conform/assets/6057521/dd684962-ab2e-42d9-b2cc-b52279799bf0

Additional context

No response

[benjammartin]

Ok, I found the issue. I was using useFormStatus inside a custom Submit button, but it seems that I have to use it directly in my form and pass useFormStatus props to my custom Submit button from it.

const Submit: React.FC<SubmitProps> = ({
  children,
  className,
  pending,
  ...props
}) => {
  const status = useFormStatus();
  return (
    <Button size='small' disabled={status.pending} className={className} {...props}>
      {status.pending ? <Loading /> : children}
    </Button>
  );
};

export default Submit;

const Submit: React.FC<SubmitProps> = ({
  children,
  className,
  pending,
  ...props
}) => {
  return (
    <Button size='small' disabled={pending} className={className} {...props}>
      {pending ? <Loading /> : children}
    </Button>
  );
};

export default Submit;

`

Submit`