Delayed async onSubmit form cancel doesn't reset

[Pandoks]

• [X] Before posting an issue, read the FAQ and search the previous issues.

Description A clear and concise description of what the bug is, and, unless obvious, what you expected instead.

    onSubmit: async (form) => {
      const { challengeId, credentialId, signature, authenticatorData, clientDataJSON } =
        await authenticatePasskey();

      if (!challengeId || !credentialId || !signature || !authenticatorData || !clientDataJSON) {
        form.cancel();
        return;
      }

      passkeyForm.form.set({
        usernameOrEmail: get(passkeyForm.form).usernameOrEmail,
        credentialId: credentialId || '',
        challengeId: challengeId || '',
        signature: signature || '',
        encodedAuthenticatorData: authenticatorData || '',
        clientDataJSON: clientDataJSON || ''
      });
    }
...
  const {
    form: passkeyFormData,
    enhance: passkeyEnhance,
    delayed: passkeyDelayedForm
  } = passkeyForm;

$passkeyDelayedForm doesn't reset when you cancel inside the async onSubmit function.

await authenticatePasskey() pops up a prompt for the user and waits for their input. When the user inputs their information quickly, $delayed will get reset. If the user takes too long though and the form is canceled, the $delayed won't reset giving me an infinite loading state.

I verified that with every interaction that it is making it into the if block:

if (!challengeId || !credentialId || !signature || !authenticatorData || !clientDataJSON) {
        form.cancel();
        return;
      }

When I print the output of $passkeyDelayedForm after the form.cancel() however, it says that it's true when there is a long enough delay. It will print false if it's done quickly.

[ciscoheat]

onSubmit is not asynchronous, you need to have a separate variable and use form.cancel in onSubmit if the variable is empty, then call your auth function which submits the form again when it has the credentials.