#form.state.isSubmitting not working

12 messages · Page 1 of 1 (latest)

naive hound
#

or am I missing something?

import { Button } from "@/components/ui/button";
import { FieldGroup } from "@/components/ui/field";
import { loginServerFn } from "@/functions/auth";
import { useAppForm } from "@/hooks/use-app-form";
import { loginSchema } from "@/schemas/user";
import { useNavigate } from "@tanstack/react-router";
import { useServerFn } from "@tanstack/react-start";
import { EyeIcon, EyeOffIcon, LogInIcon, MailIcon } from "lucide-react";
import { useState } from "react";
import type z from "zod";

export const LoginForm = () => {
  const navigate = useNavigate();
  const loginFn = useServerFn(loginServerFn);

  const [showPassword, setShowPassword] = useState<boolean>(false);

  const form = useAppForm<z.infer<typeof loginSchema>>({
    defaultValues: { email: "", password: "" },
    validators: {
      onSubmit: loginSchema,
      onSubmitAsync: async ({ value: data }) => {
        const { ok, error } = await loginFn({ data });
        if (ok) return;
        return { fields: error };
      },
    },
    onSubmit: async () => {
      await navigate({ to: "/" });
    },
  });

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        form.handleSubmit();
      }}
    >
      <FieldGroup>
        <form.AppField name="email">
          {(field) => (
            <field.Input />
          )}
        </form.AppField>
        <form.AppField name="password">
          {(field) => (
            <field.Input />
          )}
        </form.AppField>
        <Button disabled={form.state.isSubmitting}>
          <LogInIcon /> Login
        </Button>
      </FieldGroup>
    </form>
  );
};

The button isn't getting disabled

thin stump
naive hound
# thin stump try to wrap <form> with <form.AppForm> 
return (
  <form.AppForm>
    <form
      onSubmit={(event) => {
        event.preventDefault();
        form.handleSubmit();
      }}
    >
      <FieldGroup>
        <form.AppField name="email">
          {(field) => (
            <field.Input />
          )}
        </form.AppField>
        <form.AppField name="password">
          {(field) => (
            <field.Input />
          )}
        </form.AppField>
        <Button disabled={form.state.isSubmitting}>
          <LogInIcon /> Login
        </Button>
      </FieldGroup>
    </form>
  </form.AppForm>
);

like this? not working either

#

got it

#

had to put it in subscribe component

# 
<form.Subscribe selector={(state) => state.isSubmitting}>
  {(isSubmitting) => (
    <Button disabled={isSubmitting}>
      <LogInIcon /> Login
    </Button>
  )}
</form.Subscribe>
#

wondering what's the point of having form.state.isSubmitting then? can we even use it anywhere?

smoky ingot
#

it‘s not reactive on its own, otherwise you‘d rerender on literally any state changes

#

useStore or form.Subscribe are ways to access it reactively

naive hound
#

got it

fleet light
#

const isSubmitting = useStore(form.store, state => state.isSubmitting)