add handle to commentslist, scroll down to comment fix

packages/sanity/src/core/comments/components/list/CommentsList.tsx

@@ -1,4 +1,5 @@
-import React, {useEffect, useMemo, useState} from 'react'
+/* eslint-disable max-nested-callbacks */
+import React, {forwardRef, useCallback, useImperativeHandle, useMemo, useState} from 'react'
 import {BoundaryElementProvider, Container, Flex, Spinner, Stack, Text} from '@sanity/ui'
 import {CurrentUser, Path} from '@sanity/types'
 import * as PathUtils from '@sanity/util/paths'
@@ -32,7 +33,6 @@ function groupComments(comments: CommentDocument[]) {
  */
 export interface CommentsListProps {
   comments: CommentDocument[]
-  currentCommentId?: string
   currentUser: CurrentUser
   error: Error | null
   loading: boolean
@@ -50,10 +50,20 @@ export interface CommentsListProps {
  * @beta
  * @hidden
  */
-export function CommentsList(props: CommentsListProps) {
+export interface CommentsListHandle {
+  scrollToComment: (id: string) => void
+}
+
+/**
+ * @beta
+ * @hidden
+ */
+export const CommentsList = forwardRef<CommentsListHandle, CommentsListProps>(function CommentsList(
+  props: CommentsListProps,
+  ref,
+) {
   const {
     comments,
-    currentCommentId,
     currentUser,
     error,
     loading,
@@ -68,6 +78,29 @@ export function CommentsList(props: CommentsListProps) {
   } = props
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
+  const scrollToComment = useCallback(
+    (id: string) => {
+      const commentElement = boundaryElement?.querySelector(`[data-comment-id="${id}"]`)
+
+      commentElement?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center',
+      })
+    },
+    [boundaryElement],
+  )
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        scrollToComment,
+      }
+    },
+    [scrollToComment],
+  )
+
   const groupedComments = useMemo(() => {
     // This is done to make sure we get all replies, even if they are not in
     // the current view (ie has wrong status)
@@ -88,17 +121,6 @@ export function CommentsList(props: CommentsListProps) {
   const showError = error
   const showLoading = loading && !error
 
-  useEffect(() => {
-    if (!loading && currentCommentId && boundaryElement) {
-      const commentElement = boundaryElement.querySelector(
-        `[data-comment-id="${currentCommentId}"]`,
-      )
-      if (commentElement) {
-        commentElement.scrollIntoView({behavior: 'smooth', block: 'center'})
-      }
-    }
-  }, [boundaryElement, currentCommentId, loading])
-
   return (
     <Flex
       direction="column"
@@ -197,4 +219,4 @@ export function CommentsList(props: CommentsListProps) {
       )}
     </Flex>
   )
-}
+})

packages/sanity/src/core/comments/components/list/CommentsListItemLayout.tsx

@@ -194,10 +194,10 @@ export function CommentsListItemLayout(props: CommentsListItemLayoutProps) {
 
   return (
     <RootStack
-      space={1}
-      ref={setRootElement}
-      data-menu-open={menuOpen ? 'true' : 'false'}
       data-comment-id={_id}
+      data-menu-open={menuOpen ? 'true' : 'false'}
+      ref={setRootElement}
+      space={1}
     >
       <Flex align="center" gap={FLEX_GAP} flex={1}>
         {avatar}

packages/sanity/src/core/comments/index.ts

@@ -9,6 +9,6 @@ export {
 export {CommentsProvider} from './context'
 export {useComments, useFieldCommentsCount, useCommentsEnabled} from './hooks'
 
-export type {CommentDeleteDialogProps} from './components'
+export type {CommentDeleteDialogProps, CommentsListHandle} from './components'
 export type {CommentsProviderProps} from './context'
 export type {CommentCreatePayload, CommentEditPayload, CommentMessage, CommentStatus} from './types'

packages/sanity/src/desk/comments/inspector/CommentsInspector.tsx

@@ -1,21 +1,22 @@
 import {Flex} from '@sanity/ui'
-import React, {useCallback, useRef, useState} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
 import {Path} from '@sanity/types'
 import {useDocumentPane} from '../../panes/document/useDocumentPane'
+import {usePaneRouter} from '../../components'
+import {EMPTY_PARAMS} from '../../constants'
 import {CommentsInspectorHeader} from './CommentsInspectorHeader'
 import {
   CommentCreatePayload,
   CommentDeleteDialog,
   CommentEditPayload,
   CommentStatus,
   CommentsList,
+  CommentsListHandle,
   DocumentInspectorProps,
   useComments,
   useCurrentUser,
   useUnique,
 } from 'sanity'
-import {usePaneRouter} from '../../components'
-import {EMPTY_PARAMS} from '../../constants'
 
 interface CommentToDelete {
   commentId: string
@@ -27,7 +28,7 @@ export function CommentsInspector(props: DocumentInspectorProps) {
   const [view, setView] = useState<CommentStatus>('open')
   const paneRouter = usePaneRouter()
   const params = useUnique(paneRouter.params) || (EMPTY_PARAMS as Partial<{comment?: string}>)
-  const commentIdParamRef = useRef(params?.comment)
+  const commentIdParamRef = useRef<string | undefined>(params?.comment)
 
   const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false)
   const [commentToDelete, setCommentToDelete] = useState<CommentToDelete | null>(null)
@@ -38,6 +39,20 @@ export function CommentsInspector(props: DocumentInspectorProps) {
   const currentUser = useCurrentUser()
   const {comments, create, edit, mentionOptions, remove, update} = useComments()
 
+  const commentsListHandleRef = useRef<CommentsListHandle>(null)
+  const didScrollDown = useRef<boolean>(false)
+
+  useEffect(() => {
+    if (commentIdParamRef.current && !didScrollDown.current && !comments.loading) {
+      commentsListHandleRef.current?.scrollToComment(commentIdParamRef.current)
+      didScrollDown.current = true
+    }
+
+    return () => {
+      didScrollDown.current = false
+    }
+  }, [comments.loading])
+
   const closeDeleteDialog = useCallback(() => {
     if (deleteLoading) return
     setShowDeleteDialog(false)
@@ -125,7 +140,6 @@ export function CommentsInspector(props: DocumentInspectorProps) {
 
         {currentUser && (
           <CommentsList
-            currentCommentId={commentIdParamRef?.current}
             comments={comments.data}
             currentUser={currentUser}
             error={comments.error}
@@ -137,6 +151,7 @@ export function CommentsInspector(props: DocumentInspectorProps) {
             onPathFocus={handlePathFocus}
             onReply={handleReply}
             onStatusChange={handleStatusChange}
+            ref={commentsListHandleRef}
             status={view}
           />
         )}