Button text not responding to isSubmitting

[wispy pine]

Hello. I have a sign in and sign up page. Both of the buttons are listening to isSubmitting/isValidating to change their text. But for some reason, only the signin button changes text, not the signup button.

[wispy glen]

what are your validators?

and your submit function?

[wispy pine]

const signInSchema = z.object({
  email: z
    .email({ message: "Please enter a valid email address." })
    .max(40, { message: "Email cannot be longer than 40 characters." })
    .nonempty({ message: "Please enter your email address." }),
  password: z
    .string()
    .min(8, { message: "Password must be at least 8 characters long." })
    .max(30, { message: "Password should not be longer than 30 characters." })
    .nonempty({ message: "Please enter a password." }),
});

export function SignIn() {
  const [authErrorMessage, setAuthErrorMessage] = useState<string>("");

  const form = useForm({
    defaultValues: {
      email: "",
      password: "",
    },

    validators: {
      onChange: signInSchema,
    },

    onSubmit: async ({ value }) => {
      const { error } = await authClient.signIn.email({
        email: value.email,
        password: value.password,
      });

      // If there was an error
      if (error) {
        if (error?.code) {
          setAuthErrorMessage(getAuthErrorMessage(error?.code));
          return;
        }

        // An error occurred but there is no code? This could be due to change in better-auth library. For this situation, we will be returning a generic error message and call sentry

        // TODO: call sentry
        setAuthErrorMessage(
          "We have encountered a strange error. Please try again later.",
        );
        return;
      }

      // If no error, redirect to dashboard
      redirect("/dashboard");
    },
  });

Signin.tsx

[wispy glen]

a zod synchronous validator takes a few ms at most. isValidating will long be false before another render cycle hits

isSubmitting includes the authClient sign in

[wispy pine]

const signUpSchema = z....

export function SignUp() {
  const [authErrorMessage, setAuthErrorMessage] = useState<string>("");
  const form = useForm({
    defaultValues: {
      name: "",
      email: "",
      password: "",
      confirmPassword: "",
    },

    validators: {
      onChange: signUpSchema,
    },

    onSubmit: async ({ value }) => {
      const { error } = await authClient.signUp.email({
        name: value.name,
        email: value.email,
        password: value.password,
      });

      // If there was an error
      if (error) {
        if (error?.code) {
          setAuthErrorMessage(getAuthErrorMessage(error?.code));
          return;
        }

        // An error occurred but there is no code? This could be due to change in better-auth library. For this situation, we will be returning a generic error message and call sentry

        // TODO: call sentry
        setAuthErrorMessage(
          "We have encountered a strange error. Please try again later.",
        );
        return;
      }

      // If no error, redirect to dashboard
      redirect("/dashboard");
    },
  });
  

Signup.tsx

[wispy pine]

Thanks a lot mate!

✨