fix: update checklist when pressing enter on edit (#292)

* fix: update checklist when pressing enter on edit

* feat: open new checklist item form on enter

Author: hjball

apps/web/src/views/card/components/ChecklistItemRow.tsx

@@ -17,6 +17,7 @@ interface ChecklistItemRowProps {
     completed: boolean;
   };
   cardPublicId: string;
+  onCreateNewItem?: () => void;
   viewOnly?: boolean;
   dragHandleProps?: DraggableProvided["dragHandleProps"];
   isDragging?: boolean;
@@ -25,6 +26,7 @@ interface ChecklistItemRowProps {
 export default function ChecklistItemRow({
   item,
   cardPublicId,
+  onCreateNewItem,
   viewOnly = false,
   dragHandleProps,
   isDragging = false,
@@ -187,7 +189,10 @@ export default function ChecklistItemRow({
           disabled={viewOnly}
           onChange={(e) => setTitle(e.target.value)}
           // @ts-expect-error - valid event
-          onBlur={(e: Event) => commitTitle(e.target.innerHTML as string)}
+          onBlur={(e: Event) => {
+            const innerHTML = (e.target as HTMLElement).innerHTML;
+            commitTitle(innerHTML);
+          }}
           className={twMerge(
             "m-0 min-h-[20px] w-full p-0 text-sm leading-[20px] text-light-950 outline-none focus-visible:outline-none dark:text-dark-950",
             viewOnly && "cursor-default",
@@ -197,7 +202,9 @@ export default function ChecklistItemRow({
             if (viewOnly) return;
             if (e.key === "Enter") {
               e.preventDefault();
-              commitTitle(title);
+              const innerHTML = (e.currentTarget as HTMLElement).innerHTML;
+              commitTitle(innerHTML);
+              onCreateNewItem?.();
             }
             if (e.key === "Escape") {
               e.preventDefault();

apps/web/src/views/card/components/Checklists.tsx

@@ -210,6 +210,9 @@ export default function Checklists({
                                   completed: item.completed,
                                 }}
                                 cardPublicId={cardPublicId}
+                                onCreateNewItem={() =>
+                                  setActiveChecklistForm?.(checklist.publicId)
+                                }
                                 viewOnly={viewOnly}
                                 dragHandleProps={provided.dragHandleProps}
                                 isDragging={snapshot.isDragging}