fix(ui): prevent wrong scroll target when adding rows in repeated array blocks (#15047)

### What?

Adding rows to an array field inside repeated Lexical blocks sometimes
scrolls to the first block instead of the block where the row was added.

### Why?

Row elements share the same DOM id because the parent path isn’t made
unique per block in Lexical, so `scrollToID` matches the first
occurrence.

### How?

Add a block-unique prefix into the array field path/id generation when
rendering array fields, ensuring each block’s rows have distinct DOM ids
and scroll targets.

Fixes: #14333

Author: Robot-Inventor

packages/ui/src/fields/Array/ArrayRow.tsx

@@ -47,6 +47,7 @@ type ArrayRowProps = {
   readonly rowCount: number
   readonly rowIndex: number
   readonly schemaPath: string
+  readonly scrollIdPrefix: string
   readonly setCollapse: (rowID: string, collapsed: boolean) => void
 } & Pick<ClientComponentProps, 'forceRender'> &
   UseDraggableSortableReturn
@@ -77,6 +78,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
   rowCount,
   rowIndex,
   schemaPath,
+  scrollIdPrefix,
   setCollapse,
   setNodeRef,
   transform,
@@ -141,7 +143,7 @@ export const ArrayRow: React.FC<ArrayRowProps> = ({
             : undefined
         }
         header={
-          <div className={`${baseClass}__row-header`}>
+          <div className={`${baseClass}__row-header`} id={`${scrollIdPrefix}-row-${rowIndex}`}>
             {isLoading ? (
               <ShimmerEffect height="1rem" width="8rem" />
             ) : (

packages/ui/src/fields/Array/index.tsx

@@ -6,7 +6,7 @@ import type {
 } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
-import React, { Fragment, useCallback, useMemo } from 'react'
+import React, { Fragment, useCallback, useId, useMemo } from 'react'
 import { toast } from 'sonner'
 
 import type { ClipboardPasteData } from '../../elements/ClipboardAction/types.js'
@@ -144,6 +144,9 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
     validate: memoizedValidate,
   })
 
+  const componentId = useId()
+  const scrollIdPrefix = useMemo(() => `scroll-${componentId}`, [componentId])
+
   const addRow = useCallback(
     (rowIndex: number) => {
       addFieldRow({
@@ -153,10 +156,10 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
       })
 
       setTimeout(() => {
-        scrollToID(`${path}-row-${rowIndex}`)
+        scrollToID(`${scrollIdPrefix}-row-${rowIndex}`)
       }, 0)
     },
-    [addFieldRow, path, schemaPath],
+    [addFieldRow, path, schemaPath, scrollIdPrefix],
   )
 
   const duplicateRow = useCallback(
@@ -166,10 +169,10 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
       setModified(true)
 
       setTimeout(() => {
-        scrollToID(`${path}-row-${rowIndex}`)
+        scrollToID(`${scrollIdPrefix}-row-${rowIndex}`)
       }, 0)
     },
-    [dispatchFields, path, setModified],
+    [dispatchFields, path, scrollIdPrefix, setModified],
   )
 
   const removeRow = useCallback(
@@ -439,6 +442,7 @@ export const ArrayFieldComponent: ArrayFieldClientComponent = (props) => {
                     rowCount={rows?.length}
                     rowIndex={i}
                     schemaPath={schemaPath}
+                    scrollIdPrefix={scrollIdPrefix}
                     setCollapse={setCollapse}
                   />
                 )}