diff --git a/apps/console/src/hooks/forms/useVendorForm.tsx b/apps/console/src/hooks/forms/useVendorForm.tsx index b063a1017..1f1d2d690 100644 --- a/apps/console/src/hooks/forms/useVendorForm.tsx +++ b/apps/console/src/hooks/forms/useVendorForm.tsx @@ -5,6 +5,7 @@ import { useFragment } from "react-relay"; import type { useVendorFormFragment$key } from "./__generated__/useVendorFormFragment.graphql"; import { useMutationWithToasts } from "../useMutationWithToasts"; import { useTranslate } from "@probo/i18n"; +import { useEffect, useMemo } from "react"; const schema = z.object({ name: z.string(), @@ -68,8 +69,8 @@ export function useVendorForm(vendorKey: useVendorFormFragment$key) { errorMessage: __("Failed to update vendor. Please try again."), }); - const form = useFormWithSchema(schema, { - defaultValues: { + const defaultValues = useMemo( + () => ({ name: vendor.name, description: vendor.description ?? "", statusPageUrl: vendor.statusPageUrl ?? "", @@ -85,7 +86,12 @@ export function useVendorForm(vendorKey: useVendorFormFragment$key) { trustPageUrl: vendor.trustPageUrl ?? "", businessOwnerId: vendor.businessOwner?.id, securityOwnerId: vendor.securityOwner?.id, - }, + }), + [vendor], + ); + + const form = useFormWithSchema(schema, { + defaultValues, }); const handleSubmit = form.handleSubmit((data) => { @@ -101,6 +107,10 @@ export function useVendorForm(vendorKey: useVendorFormFragment$key) { }); }); + useEffect(() => { + form.reset(defaultValues, { keepDirty: true }); + }, [defaultValues, form]); + return { ...form, handleSubmit, diff --git a/apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx b/apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx index c066ce43e..4ff9cc113 100644 --- a/apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx +++ b/apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx @@ -18,7 +18,7 @@ export default function VendorOverviewTab() { control, register, handleSubmit, - formState: { errors, isDirty, isSubmitting }, + formState: { errors, isSubmitting }, } = useVendorForm(vendor); const urls = useMemo( @@ -38,7 +38,7 @@ export default function VendorOverviewTab() { { name: "securityPageUrl", label: __("Security page URL") }, { name: "trustPageUrl", label: __("Trust page URL") }, ] as const, - [] + [], ); usePageTitle(vendor.name + " - " + __("Overview")); @@ -84,7 +84,7 @@ export default function VendorOverviewTab() { {/* Ownership */}