feat: focus item form on creation of new checklist

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

@@ -17,7 +17,7 @@ interface NewChecklistFormInput {
 }
 
 export function NewChecklistForm({ cardPublicId }: { cardPublicId: string }) {
-  const { closeModal } = useModal();
+  const { closeModal, setModalState } = useModal();
   const { showPopup } = usePopup();
 
   const utils = api.useUtils();
@@ -56,6 +56,9 @@ export function NewChecklistForm({ cardPublicId }: { cardPublicId: string }) {
       });
       return { previous };
     },
+    onSuccess: (data) => {
+      setModalState("ADD_CHECKLIST", { createdChecklistId: data.publicId });
+    },
     onError: (_error, vars, ctx) => {
       if (ctx?.previous)
         utils.card.byId.setData(

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

@@ -40,17 +40,12 @@ const NewChecklistItemForm = ({
   const refocusEditable = () => {
     const el = editableRef.current;
     if (!el) return;
+    el.focus();
+
+    // hack to ensure the input is focused after creating new checklist item
     setTimeout(() => {
       el.focus();
-      const range = document.createRange();
+    }, 100);
-      range.selectNodeContents(el);
-      range.collapse(false);
-      const sel = window.getSelection();
-      if (sel) {
-        sel.removeAllRanges();
-        sel.addRange(range);
-      }
-    }, 0);
   };
 
   const addChecklistItemMutation = api.checklist.createItem.useMutation({
@@ -150,6 +145,8 @@ const NewChecklistItemForm = ({
         </label>
         <div className="flex-1 pr-7">
           <ContentEditable
+            id={`checklist-item-input-${checklistPublicId}`}
+            tabIndex={0}
             placeholder={t`Add an item...`}
             html={title}
             disabled={false}

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

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { HiPlus, HiXMark } from "react-icons/hi2";
 import { IoChevronForwardSharp } from "react-icons/io5";
@@ -140,7 +140,13 @@ export function CardRightPanel() {
 export default function CardPage() {
   const router = useRouter();
   const utils = api.useUtils();
-  const { modalContentType, entityId, openModal } = useModal();
+  const {
+    modalContentType,
+    entityId,
+    openModal,
+    getModalState,
+    clearModalState,
+  } = useModal();
   const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
   const [activeChecklistForm, setActiveChecklistForm] = useState<string | null>(
@@ -192,6 +198,17 @@ export default function CardPage() {
     });
   };
 
+  // Open the new item form after creating a new checklist
+  useEffect(() => {
+    if (!card) return;
+    const state = getModalState("ADD_CHECKLIST");
+    const createdId: string | undefined = state?.createdChecklistId;
+    if (createdId) {
+      setActiveChecklistForm(createdId);
+      clearModalState("ADD_CHECKLIST");
+    }
+  }, [card, getModalState, clearModalState]);
+
   if (!cardId) return <></>;
 
   return (