fix: New comment auto-focus (#10911)

* refactor

* fix: autoFocus on comment editor

app/components/AuthenticatedLayout.tsx

@@ -32,7 +32,7 @@ import { PortalContext } from "./Portal";
 import CommandBar from "./CommandBar";
 
 const DocumentComments = lazyWithRetry(
-  () => import("~/scenes/Document/components/Comments")
+  () => import("~/scenes/Document/components/Comments/Comments")
 );
 const DocumentHistory = lazyWithRetry(
   () => import("~/scenes/Document/components/History")

app/components/Notifications/NotificationListItem.tsx

@@ -15,7 +15,7 @@ import { UnreadBadge } from "../UnreadBadge";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 
 const CommentEditor = lazyWithRetry(
-  () => import("~/scenes/Document/components/CommentEditor")
+  () => import("~/scenes/Document/components/Comments/CommentEditor")
 );
 
 type Props = {

app/scenes/Document/components/Comments/CommentForm.tsx

@@ -25,6 +25,7 @@ import useStores from "~/hooks/useStores";
 import { Bubble } from "./CommentThreadItem";
 import { HighlightedText } from "./HighlightText";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import { mergeRefs } from "react-merge-refs";
 
 const CommentEditor = lazyWithRetry(() => import("./CommentEditor"));
 
@@ -247,15 +248,15 @@ function CommentForm({
     }
   };
 
-  // Focus the editor when it's a new comment just mounted, after a delay as the
-  // editor is mounted within a fade transition.
-  React.useEffect(() => {
-    setTimeout(() => {
+  // Focus the editor when it's a new comment just mounted
+  const handleMounted = React.useCallback(
+    (ref) => {
       if (autoFocus) {
-        editorRef.current?.focusAtStart();
+        ref?.focusAtStart();
       }
-    }, 0);
-  }, [autoFocus]);
+    },
+    [autoFocus]
+  );
 
   const presence = animatePresence
     ? {
@@ -310,7 +311,7 @@ function CommentForm({
           )}
           <CommentEditor
             key={`${forceRender}`}
-            ref={editorRef}
+            ref={mergeRefs([editorRef, handleMounted])}
             defaultValue={draft}
             onChange={handleChange}
             onSave={handleSave}

app/scenes/Document/components/Comments/Comments.tsx

@@ -11,6 +11,7 @@ import Empty from "~/components/Empty";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
+import { ArrowDownIcon } from "~/components/Icons/ArrowIcon";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import { useFocusedComment } from "~/hooks/useFocusedComment";
 import useKeyDown from "~/hooks/useKeyDown";
@@ -22,9 +23,8 @@ import { CommentSortOption, CommentSortType } from "~/types";
 import CommentForm from "./CommentForm";
 import CommentSortMenu from "./CommentSortMenu";
 import CommentThread from "./CommentThread";
-import Sidebar from "./SidebarLayout";
+import Sidebar from "../SidebarLayout";
 import useMobile from "~/hooks/useMobile";
-import { ArrowDownIcon } from "~/components/Icons/ArrowIcon";
 
 function Comments() {
   const { ui, comments, documents } = useStores();