rendering problem in defaultValue attribute

[hasty rose]

Hello everyone,

I’m using NextUI for the first time
I’m facing an issue with my edit forms. When I edit an element and go back to the edit page, the defaultValue doesn't update. I'm sharing a piece of my code, and I feel like it’s due to the rerender not happening for the defaultValue. Does anyone have a solution? It keeps the old value

However, when I use a regular input without NextUI, it works.

export default function EditCompany() {
  const params = useParams();
  const companyId = params.companyId as string;

  const {
    data: company,
    isLoading,
    isError } = useQuery<CompanyResp, AxiosError>({
    queryKey: ['company', companyId],
    queryFn: () => CompanyApi.get(companyId),
    enabled: !!companyId,
    retry: false,
  });

  if (isLoading) {
    return (
      <div className='mx-auto my-10 flex w-full max-w-[95rem] flex-col gap-4 px-4 lg:px-6'>
        <Spinner />
      </div>
    );
  }

  if (isError) {
    notFound();
  }

  return <CompanyEdit company={company} />;
}

export default function CompanyEdit({ company }: CompanyEditProps) {
  if (!company) {
    notFound();
  }

  const [errors, setErrors] = useState({});
  const router = useRouter();

  const { mutate: createCompany, isPending } = useMutation({
    mutationFn: (body: EditCompanyParams) =>
      CompanyApi.update(company.id, body),
    onSuccess: (data: EditCompanyResp) => {
      router.push(ROUTES.ADMIN.COMPANIES.index);
      toast.success(data.message);
    },
    onError: (error: AxiosError) => handleApiErrors(error, setErrors),
  });

  const onSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();

    const formData = new FormData(e.target as HTMLFormElement);
    const formValues = Object.fromEntries(formData.entries()) as {
      [key: string]: string;
    };

    createCompany({ name: formValues.name });
  };

  return (
    <div className='mx-auto my-10 flex w-full max-w-[95rem] flex-col gap-4 px-4 lg:px-6'>
      <h3 className='text-xl font-semibold'>Edit Company</h3>
      <div className='mx-auto w-full max-w-[95rem]'>
        <Form
          className='flex w-full max-w-xs flex-col gap-4'
          validationErrors={errors}
          onSubmit={onSubmit}
        >
          <Input
            label='Name'
            labelPlacement='inside'
            name='name'
            defaultValue={company?.name}
          />
          <Button isLoading={isPending} color='primary' type='submit'>
            Submit
          </Button>
        </Form>
      </div>
    </div>
  );
}

[hasty rose]

up

[pearl otter]

hey after the vaule s updated, can u log if company?.name is updated in CompanyEdit?

[hasty rose]

Hello @pearl otter, yes it is updated. I tried with a console log and a native HTML input, and it renders the update correctly (I had some doubts at first that it was related to my useQuery)

[pearl otter]

can u share a repo / sandbox for us to investigate or test

[hasty rose]

@pearl otter
I have a very simple example to give you, as I unfortunately didn’t have time to create a sandbox for you. In my example, I use the session to populate the defaultValue, but it never gets updated even though I have data

import {
  Button,
  Card,
  CardBody,
  CardHeader,
  Form,
  Input,
} from '@heroui/react';
import { useSession } from 'next-auth/react';
import React from 'react';

export default function AccountProfile() {
  const { data: session } = useSession();

  if (session?.user?.email) {
    console.log('I have email')
  } else {
    console.log('Not email')
  }

  return (
    <Card className='mb-5'>
      <CardHeader>
        <h1 className='text-xl font-semibold'>Profile</h1>
      </CardHeader>
      <CardBody>
        <Form className='items-stretch' validationBehavior='native'>
          <div className='grid grid-cols-1 gap-5 lg:grid-cols-2'>
            <label>Default Input HTML</label>
            <input defaultValue={session?.user?.email} className="border border-slate-200" />
            <Input
              isRequired
              label='Firstname'
              name='firstname'
              placeholder='Enter your first name'
              defaultValue={session?.user.firstName}
              type='text'
            />
            <Input
              isRequired
              label='Lastname'
              name='lastname'
              placeholder='Enter your last name'
              defaultValue={session?.user.lastName}
              type='text'
            />
            <Input
              isRequired
              label='Email'
              name='email'
              placeholder='Enter your email'
              defaultValue={session?.user?.email}
              type='text'
            />
          </div>
          <div className='mt-4 flex justify-end'>
            <Button color='primary' type='submit'>
              Save Profile
            </Button>
          </div>
        </Form>
      </CardBody>
    </Card>
  );
}