fix: creating a new label when adding a new card resets all fields (#119)

* fix: creating a new label when adding a new card resets all fields

* fix: persist form data and modal stacking without breaking the animations

apps/web/src/components/CheckboxDropdown.tsx

@@ -86,8 +86,10 @@ export default function CheckboxDropdown({
             </label>
             {handleEdit && (
               <button
+                type="button"
                 className="invisible ml-auto group-hover:visible"
                 onClick={(event) => {
+                  event.preventDefault();
                   event.stopPropagation();
                   handleEdit(item.key);
                 }}
@@ -100,8 +102,12 @@ export default function CheckboxDropdown({
       ))}
       {handleCreate && (
         <button
+          type="button"
           className="flex w-full items-center rounded-[5px] p-2 px-2 text-[12px] text-dark-900 hover:bg-light-200 dark:hover:bg-dark-300"
-          onClick={() => handleCreate()}
+          onClick={(e) => {
+            e.preventDefault();
+            handleCreate();
+          }}
         >
           <HiMiniPlus size={20} className="pr-1.5" />
           {createNewItemLabel}

apps/web/src/components/Editor.tsx

@@ -15,6 +15,7 @@ import {
   ReactRenderer,
   useEditor,
 } from "@tiptap/react";
+import { useEffect } from "react";
 import StarterKit from "@tiptap/starter-kit";
 import Suggestion from "@tiptap/suggestion";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
@@ -343,9 +344,19 @@ export default function Editor({
       editable: !readOnly,
       injectCSS: false,
     },
-    [content],
+    [], // creating the editor only once
   );
 
+  // this will sync external content changes without re-creating the editor instance
+  useEffect(() => {
+    if (!editor) return;
+    const currentHTML = editor.getHTML();
+    const safeContent = content ?? "";
+    if (safeContent !== currentHTML) {
+      editor.commands.setContent(safeContent, false);
+    }
+  }, [content, editor]);
+
   return (
     <div ref={containerRef}>
       <style jsx global>{`

apps/web/src/components/LabelForm.tsx

@@ -63,12 +63,16 @@ export function LabelForm({
       );
       try {
         refetch();
-        if (!isCreateAnotherEnabled) closeModal();
+        if (!isCreateAnotherEnabled) {
-        reset({
+          closeModal();
-          name: "",
+        } else {
-          colour: colours[(currentColourIndex + 1) % colours.length],
+          const newFormState = {
-          isCreateAnotherEnabled,
+            name: "",
-        });
+            colour: colours[(currentColourIndex + 1) % colours.length],
+            isCreateAnotherEnabled,
+          };
+          reset(newFormState);
+        }
       } catch (e) {
         console.log(e);
       }
@@ -79,10 +83,6 @@ export function LabelForm({
     onSuccess: () => {
       refetch();
       closeModal();
-      reset({
-        name: "",
-        colour: colours[0],
-      });
     },
   });
 

apps/web/src/components/modal.tsx

@@ -7,15 +7,19 @@ interface Props {
   children: React.ReactNode;
   modalSize?: "sm" | "md" | "lg";
   positionFromTop?: "sm" | "md" | "lg";
+  isVisible?: boolean;
 }
 
 const Modal: React.FC<Props> = ({
   children,
   modalSize = "sm",
   positionFromTop = "md",
+  isVisible,
 }) => {
   const { isOpen, closeModal } = useModal();
 
+  const shouldShow = isVisible !== undefined ? isVisible : isOpen;
+
   const modalSizeMap = {
     sm: "max-w-[400px]",
     md: "max-w-[550px]",
@@ -29,7 +33,7 @@ const Modal: React.FC<Props> = ({
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
+    <Transition.Root show={shouldShow} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={closeModal}>
         <Transition.Child
           as={Fragment}

apps/web/src/hooks/useModalFormState.ts

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { useModal } from "~/providers/modal";
+
+interface UseModalFormStateOptions<T> {
+  modalType: string;
+  initialValues: T;
+  resetOnClose?: boolean;
+}
+
+export function useModalFormState<T extends Record<string, any>>({
+  modalType,
+  initialValues,
+  resetOnClose = false,
+}: UseModalFormStateOptions<T>) {
+  const { modalContentType, isOpen, getModalState, setModalState, clearModalState } = useModal();
+  
+  const isCurrentModal = modalContentType === modalType;
+  const savedState = getModalState(modalType) as T | undefined;
+  
+  // get current form state (using the saved values if available, otherwise the initial values)
+  const formState = savedState || initialValues;
+
+  const saveFormState = (state: Partial<T>) => {
+    if (!isCurrentModal) return;
+    
+    const currentState = getModalState(modalType) || initialValues;
+    const newState = { ...currentState, ...state };
+    setModalState(modalType, newState);
+  };
+
+  const clearFormState = () => {
+    clearModalState(modalType);
+  };
+
+  useEffect(() => {
+    if (resetOnClose && !isOpen && savedState) {
+      clearModalState(modalType);
+    }
+  }, [isOpen, resetOnClose, savedState, modalType, clearModalState]);
+
+  return {
+    formState,
+    saveFormState,
+    clearFormState,
+    isCurrentModal,
+    hasSavedState: !!savedState,
+  };
+} 

apps/web/src/providers/modal.tsx

@@ -1,5 +1,15 @@
 import { createContext, useContext, useState } from "react";
 
+interface ModalState {
+  contentType: string;
+  entityId?: string;
+  entityLabel?: string;
+}
+
+interface Props {
+  children: React.ReactNode;
+}
+
 type ModalContextType = {
   isOpen: boolean;
   openModal: (
@@ -11,33 +21,64 @@ type ModalContextType = {
   modalContentType: string;
   entityId: string;
   entityLabel: string;
+  modalStates: Record<string, any>;
+  setModalState: (modalType: string, state: any) => void;
+  getModalState: (modalType: string) => any;
+  clearModalState: (modalType: string) => void;
+  clearAllModalStates: () => void;
 };
 
-interface Props {
-  children: React.ReactNode;
-}
-
 const ModalContext = createContext<ModalContextType | undefined>(undefined);
 
 export const ModalProvider: React.FC<Props> = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [modalStack, setModalStack] = useState<ModalState[]>([]);
-  const [entityId, setEntityId] = useState("");
+  const [modalStates, setModalStates] = useState<Record<string, any>>({});
-  const [entityLabel, setEntityLabel] = useState("");
+
-  const [modalContentType, setModalContentType] = useState("");
+  const isOpen = modalStack.length > 0;
+  const currentModal = modalStack[modalStack.length - 1];
+  const modalContentType = currentModal?.contentType || "";
+  const entityId = currentModal?.entityId || "";
+  const entityLabel = currentModal?.entityLabel || "";
 
   const openModal = (
     contentType: string,
     entityId?: string,
     entityLabel?: string,
   ) => {
-    setIsOpen(true);
+    const newModal: ModalState = { contentType, entityId, entityLabel };
-    setModalContentType(contentType);
+    setModalStack(prev => [...prev, newModal]);
-    if (entityId) setEntityId(entityId);
-    if (entityLabel) setEntityLabel(entityLabel);
   };
 
   const closeModal = () => {
-    setIsOpen(false);
+    setModalStack(prev => {
+      if (prev.length <= 1) {
+        return [];
+      }
+      return prev.slice(0, -1);
+    });
+  };
+
+  const setModalState = (modalType: string, state: any) => {
+    setModalStates(prev => ({
+      ...prev,
+      [modalType]: state
+    }));
+  };
+
+  const getModalState = (modalType: string) => {
+    return modalStates[modalType];
+  };
+
+  const clearModalState = (modalType: string) => {
+    setModalStates(prev => {
+      const newStates = { ...prev };
+      delete newStates[modalType];
+      return newStates;
+    });
+  };
+
+  const clearAllModalStates = () => {
+    setModalStates({});
   };
 
   return (
@@ -49,6 +90,11 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
         modalContentType,
         entityId,
         entityLabel,
+        modalStates,
+        setModalState,
+        getModalState,
+        clearModalState,
+        clearAllModalStates,
       }}
     >
       {children}

apps/web/src/views/board/components/NewCardForm.tsx

@@ -18,6 +18,7 @@ import Editor from "~/components/Editor";
 import Input from "~/components/Input";
 import LabelIcon from "~/components/LabelIcon";
 import Toggle from "~/components/Toggle";
+import { useModalFormState } from "~/hooks/useModalFormState";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
@@ -49,17 +50,24 @@ export function NewCardForm({
 
   const utils = api.useUtils();
 
+  // persists the form values
+  const { formState, saveFormState } = useModalFormState<NewCardFormInput>({
+    modalType: "NEW_CARD",
+    initialValues: {
+      title: "",
+      description: "",
+      listPublicId,
+      labelPublicIds: [],
+      memberPublicIds: [],
+      isCreateAnotherEnabled: false,
+      position: "start",
+    },
+    resetOnClose: true,
+  });
+
   const { register, handleSubmit, reset, setValue, watch } =
     useForm<NewCardFormInput>({
-      defaultValues: {
+      values: formState,
-        title: "",
-        description: "",
-        listPublicId,
-        labelPublicIds: [],
-        memberPublicIds: [],
-        isCreateAnotherEnabled: false,
-        position: "start",
-      },
     });
 
   const labelPublicIds = watch("labelPublicIds") || [];
@@ -67,6 +75,15 @@ export function NewCardForm({
   const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
   const position = watch("position");
   const title = watch("title");
+  const description = watch("description");
+
+  // saving form state whenever form values change
+  useEffect(() => {
+    const subscription = watch((data) => {
+      saveFormState(data as NewCardFormInput);
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, saveFormState]);
 
   const { data: boardData } = api.board.byId.useQuery(queryParams, {
     enabled: !!boardPublicId,
@@ -131,17 +148,24 @@ export function NewCardForm({
     },
     onSuccess: async () => {
       const isCreateAnotherEnabled = watch("isCreateAnotherEnabled");
-      if (!isCreateAnotherEnabled) closeModal();
+      if (!isCreateAnotherEnabled) {
+        // close modal (state will auto-clear due to resetOnClose: true)
+        closeModal();
+      } else {
+        // reset form for creating another card
+        const newFormState = {
+          title: "",
+          description: "",
+          listPublicId: watch("listPublicId"),
+          labelPublicIds: [],
+          memberPublicIds: [],
+          isCreateAnotherEnabled,
+          position,
+        };
+        reset(newFormState);
+        saveFormState(newFormState);
+      }
       await utils.board.byId.invalidate(queryParams);
-      reset({
-        title: "",
-        description: "",
-        listPublicId: watch("listPublicId"),
-        labelPublicIds: [],
-        memberPublicIds: [],
-        isCreateAnotherEnabled,
-        position,
-      });
     },
   });
 
@@ -264,8 +288,11 @@ export function NewCardForm({
         <div className="mt-2">
           <div className="block max-h-48 min-h-24 w-full overflow-y-auto rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-2 text-sm shadow-sm ring-1 ring-inset ring-light-600 focus-within:ring-2 focus-within:ring-inset focus-within:ring-light-700 dark:ring-dark-700 dark:focus-within:ring-dark-700 sm:leading-6">
             <Editor
-              content=""
+              content={description}
-              onChange={(value) => setValue("description", value)}
+              onChange={(value) => {
+                setValue("description", value);
+                saveFormState({ ...formState, description: value });
+              }}
             />
           </div>
         </div>

apps/web/src/views/board/index.tsx

@@ -45,7 +45,7 @@ export default function BoardPage() {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
-  const { openModal, modalContentType, entityId } = useModal();
+  const { openModal, modalContentType, entityId, isOpen } = useModal();
   const [selectedPublicListId, setSelectedPublicListId] =
     useState<PublicListId>("");
   const [isInitialLoading, setIsInitialLoading] = useState(true);
@@ -235,6 +235,97 @@ export default function BoardPage() {
     }
   };
 
+  const renderModalContent = () => {
+    return (
+      <>
+        <Modal 
+          modalSize="sm" 
+          isVisible={isOpen && modalContentType === "DELETE_BOARD"}
+        >
+          <DeleteBoardConfirmation boardPublicId={boardId ?? ""} />
+        </Modal>
+
+        <Modal 
+          modalSize="sm" 
+          isVisible={isOpen && modalContentType === "DELETE_LIST"}
+        >
+          <DeleteListConfirmation
+            listPublicId={selectedPublicListId}
+            queryParams={queryParams}
+          />
+        </Modal>
+
+        <Modal 
+          modalSize="md" 
+          isVisible={isOpen && modalContentType === "NEW_CARD"}
+        >
+          <NewCardForm
+            boardPublicId={boardId ?? ""}
+            listPublicId={selectedPublicListId}
+            queryParams={queryParams}
+          />
+        </Modal>
+
+        <Modal 
+          modalSize="sm" 
+          isVisible={isOpen && modalContentType === "NEW_LIST"}
+        >
+          <NewListForm
+            boardPublicId={boardId ?? ""}
+            queryParams={queryParams}
+          />
+        </Modal>
+
+        <Modal 
+          modalSize="sm" 
+          isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+        >
+          <NewWorkspaceForm />
+        </Modal>
+
+        <Modal 
+          modalSize="sm" 
+          isVisible={isOpen && modalContentType === "NEW_LABEL"}
+        >
+          <LabelForm boardPublicId={boardId ?? ""} refetch={refetchBoard} />
+        </Modal>
+
+        <Modal 
+          modalSize="sm" 
+          isVisible={isOpen && modalContentType === "EDIT_LABEL"}
+        >
+          <LabelForm
+            boardPublicId={boardId ?? ""}
+            refetch={refetchBoard}
+            isEdit
+          />
+        </Modal>
+
+        <Modal 
+          modalSize="sm" 
+          isVisible={isOpen && modalContentType === "DELETE_LABEL"}
+        >
+          <DeleteLabelConfirmation
+            refetch={refetchBoard}
+            labelPublicId={entityId}
+          />
+        </Modal>
+
+        <Modal 
+          modalSize="sm" 
+          isVisible={isOpen && modalContentType === "UPDATE_BOARD_SLUG"}
+        >
+          <UpdateBoardSlugForm
+            boardPublicId={boardId ?? ""}
+            workspaceSlug={workspace.slug ?? ""}
+            boardSlug={boardData?.slug ?? ""}
+            queryParams={queryParams}
+          />
+        </Modal>
+      </>
+    );
+  };
+
   return (
     <>
       <PageHead
@@ -422,63 +513,7 @@ export default function BoardPage() {
             </>
           ) : null}
         </div>
-        <Modal
+        {renderModalContent()}
-          modalSize={
-            modalContentType === "NEW_CARD" ||
-            modalContentType === "NEW_FEEDBACK"
-              ? "md"
-              : "sm"
-          }
-        >
-          {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
-          {modalContentType === "DELETE_BOARD" && (
-            <DeleteBoardConfirmation boardPublicId={boardId ?? ""} />
-          )}
-          {modalContentType === "DELETE_LIST" && (
-            <DeleteListConfirmation
-              listPublicId={selectedPublicListId}
-              queryParams={queryParams}
-            />
-          )}
-          {modalContentType === "NEW_CARD" && (
-            <NewCardForm
-              boardPublicId={boardId ?? ""}
-              listPublicId={selectedPublicListId}
-              queryParams={queryParams}
-            />
-          )}
-          {modalContentType === "NEW_LIST" && (
-            <NewListForm
-              boardPublicId={boardId ?? ""}
-              queryParams={queryParams}
-            />
-          )}
-          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
-          {modalContentType === "NEW_LABEL" && (
-            <LabelForm boardPublicId={boardId ?? ""} refetch={refetchBoard} />
-          )}
-          {modalContentType === "EDIT_LABEL" && (
-            <LabelForm
-              boardPublicId={boardId ?? ""}
-              refetch={refetchBoard}
-              isEdit
-            />
-          )}
-          {modalContentType === "DELETE_LABEL" && (
-            <DeleteLabelConfirmation
-              refetch={refetchBoard}
-              labelPublicId={entityId}
-            />
-          )}
-          {modalContentType === "UPDATE_BOARD_SLUG" && (
-            <UpdateBoardSlugForm
-              boardPublicId={boardId ?? ""}
-              workspaceSlug={workspace.slug ?? ""}
-              boardSlug={boardData?.slug ?? ""}
-              queryParams={queryParams}
-            />
-          )}
-        </Modal>
       </div>
     </>
   );