diff options
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx | 11 | ||||
| -rw-r--r-- | apps/web/lib/hooks/useDialogFormReset.ts | 27 |
2 files changed, 32 insertions, 6 deletions
diff --git a/apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx b/apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx index f0ede24e..021a7b05 100644 --- a/apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx +++ b/apps/web/components/dashboard/bookmarks/EditBookmarkDialog.tsx @@ -27,6 +27,7 @@ import { } from "@/components/ui/popover"; import { Textarea } from "@/components/ui/textarea"; import { toast } from "@/components/ui/use-toast"; +import { useDialogFormReset } from "@/lib/hooks/useDialogFormReset"; import { useTranslation } from "@/lib/i18n/client"; import { cn } from "@/lib/utils"; import { zodResolver } from "@hookform/resolvers/zod"; @@ -124,12 +125,10 @@ export function EditBookmarkDialog({ updateBookmarkMutate(payload); } - // Reset form when bookmark data changes externally or dialog reopens - React.useEffect(() => { - if (open) { - form.reset(bookmarkToDefault(bookmark)); - } - }, [bookmark, form, open]); + // Reset form only when dialog is initially opened to preserve unsaved changes + // This prevents losing unsaved title edits when tags are updated, which would + // cause the bookmark prop to change and trigger a form reset + useDialogFormReset(open, form, bookmarkToDefault(bookmark)); const isLink = bookmark.content.type === BookmarkTypes.LINK; const isAsset = bookmark.content.type === BookmarkTypes.ASSET; diff --git a/apps/web/lib/hooks/useDialogFormReset.ts b/apps/web/lib/hooks/useDialogFormReset.ts new file mode 100644 index 00000000..de087ca9 --- /dev/null +++ b/apps/web/lib/hooks/useDialogFormReset.ts @@ -0,0 +1,27 @@ +import type { FieldValues, UseFormReturn } from "react-hook-form"; +import { useEffect, useRef } from "react"; + +/** + * Custom hook to handle form reset behavior in dialogs + * Only resets the form when the dialog transitions from closed to open, + * preventing loss of unsaved changes when external data updates occur + * + * @param open - Dialog open state + * @param form - React Hook Form instance + * @param resetData - Data to reset the form with + */ +export function useDialogFormReset<T extends FieldValues>( + open: boolean, + form: UseFormReturn<T>, + resetData: T, +) { + const prevOpenRef = useRef(open); + + useEffect(() => { + // Only reset form when transitioning from closed to open, not on data updates + if (open && !prevOpenRef.current) { + form.reset(resetData); + } + prevOpenRef.current = open; + }, [open, form, resetData]); +} |