fix(ui): tighten clipboard prefix matching to prevent sibling row leakage on copy/paste (#17595)

Backport of #16742 to `3.x`.

### What?

`mergeFormStateFromClipboard` and its helper `reduceFormStateByPath`
used `key.startsWith(prefix)` at three callsites without enforcing a
path boundary, leaking unrelated form-state keys into the clipboard on
copy and into the merge target on paste.

Most visible failure mode: array fields with 10 or more rows. Copying
row 1 bundled rows 10, 11, 12 into the clipboard (their paths all start
with `children.1`). On paste, those leaked rows got rewritten to
out-of-bounds indices like `.50`, `.51`, `.52`, surfacing as phantom
rows the editor could not remove, failing validation and blocking save.

The same loose match also let textual sibling fields cross-contaminate
(`children` vs `childrenOther`).

### Why?

`'children.1'.startsWith('children.1')` matches `'children.10'`,
`'children.11'`, etc. `'children'.startsWith('children')` matches
`'childrenOther'`.

### How?

Added a small private helper requiring the candidate path to either
equal the prefix or be followed by `.`:

```ts
function isStrictPathPrefix(key: string, prefix: string): boolean {
  return key === prefix || key.startsWith(`${prefix}.`)
}
```

Replaced `startsWith` at all three callsites. No behavior change for
non-colliding paths.

### Tests

Includes the `describe('prefix collision with multi-digit sibling
indices')` block covering the reduce/merge/cleanup paths described
above.

Fixes #16741

---------

Co-authored-by: Julie <julie@bitcoin.com>

Author: nathanlentz

packages/ui/src/elements/ClipboardAction/mergeFormStateFromClipboard.spec.ts

@@ -3,7 +3,10 @@ import type { FormState } from 'payload'
 import ObjectIdImport from 'bson-objectid'
 import { describe, expect, it } from 'vitest'
 
-import { mergeFormStateFromClipboard } from './mergeFormStateFromClipboard.js'
+import {
+  mergeFormStateFromClipboard,
+  reduceFormStateByPath,
+} from './mergeFormStateFromClipboard.js'
 import type { ClipboardPasteData } from './types.js'
 
 const ObjectId = (
@@ -549,4 +552,222 @@ describe('mergeFormStateFromClipboard', () => {
       expect(result['disableSort.0.text'].value).toEqual('row one')
     })
   })
+
+  describe('prefix collision with multi-digit sibling indices', () => {
+    it('reduceFormStateByPath should not leak siblings whose indices share a digit prefix', () => {
+      // Array with 13 rows. Copying row 1 must filter out rows 10/11/12, whose
+      // paths all begin with the substring `children.1`.
+      const formState: FormState = {
+        children: {
+          valid: true,
+          value: 13,
+          rows: Array.from({ length: 13 }, () => ({ isLoading: false })),
+        },
+        'children.1.id': { value: 'id-1', valid: true },
+        'children.1.title': { value: 'Row 1', valid: true },
+        'children.10.id': { value: 'id-10', valid: true },
+        'children.10.title': { value: 'Row 10', valid: true },
+        'children.11.id': { value: 'id-11', valid: true },
+        'children.11.title': { value: 'Row 11', valid: true },
+        'children.12.id': { value: 'id-12', valid: true },
+        'children.12.title': { value: 'Row 12', valid: true },
+      }
+
+      const filtered = reduceFormStateByPath({
+        formState,
+        path: 'children',
+        rowIndex: 1,
+      })
+
+      const filteredKeys = Object.keys(filtered).sort()
+      expect(filteredKeys).toEqual(['children.1.id', 'children.1.title'])
+      expect(filtered['children.10.id']).toBeUndefined()
+      expect(filtered['children.11.id']).toBeUndefined()
+      expect(filtered['children.12.id']).toBeUndefined()
+    })
+
+    it('reduceFormStateByPath should not leak field-name siblings sharing a textual prefix', () => {
+      // `children` vs `childrenOther`: loose prefix matching pulls the wrong field's state.
+      const formState: FormState = {
+        children: { valid: true, value: 1, rows: [{ isLoading: false }] },
+        'children.0.id': { value: 'children-row', valid: true },
+        childrenOther: { valid: true, value: 1, rows: [{ isLoading: false }] },
+        'childrenOther.0.id': { value: 'other-row', valid: true },
+      }
+
+      const filtered = reduceFormStateByPath({ formState, path: 'children' })
+
+      // The field's own key carries `rows` and `value`, so it must survive the filter.
+      expect(filtered.children).toBeDefined()
+      expect(filtered['children.0.id']).toBeDefined()
+      expect(filtered.childrenOther).toBeUndefined()
+      expect(filtered['childrenOther.0.id']).toBeUndefined()
+    })
+
+    it('paste should not create out-of-bounds rows from a leaked clipboard payload', () => {
+      // Simulates the end-to-end Copy/Paste flow against an array with 13 rows. Even if a
+      // pre-fix clipboard leaked sibling rows (.10/.11/.12) when copying row 1, the merge
+      // filter must drop them rather than rewriting them to .50/.51/.52 when pasting into
+      // row 5.
+      const formState: FormState = {
+        children: {
+          valid: true,
+          value: 13,
+          rows: Array.from({ length: 13 }, () => ({
+            id: new ObjectId().toHexString(),
+            isLoading: false,
+          })),
+        },
+        'children.5.id': { value: new ObjectId().toHexString(), valid: true },
+      }
+
+      const sourceID = new ObjectId().toHexString()
+      const clipboardData: ClipboardPasteData = {
+        type: 'array',
+        path: 'children',
+        fields: [],
+        rowIndex: 1,
+        data: {
+          'children.1.id': { value: sourceID, valid: true },
+          'children.1.title': { value: 'Row 1 title', valid: true },
+          // Leaked siblings — these must be dropped, not rewritten to .50/.51/.52.
+          'children.10.id': { value: new ObjectId().toHexString(), valid: true },
+          'children.10.title': { value: 'Leaked Row 10', valid: true },
+          'children.11.id': { value: new ObjectId().toHexString(), valid: true },
+          'children.11.title': { value: 'Leaked Row 11', valid: true },
+          'children.12.id': { value: new ObjectId().toHexString(), valid: true },
+          'children.12.title': { value: 'Leaked Row 12', valid: true },
+        },
+      }
+
+      const result = mergeFormStateFromClipboard({
+        dataFromClipboard: clipboardData,
+        formState,
+        path: 'children',
+        rowIndex: 5,
+      })
+
+      // Target row populated from the source row.
+      expect(result['children.5.title']?.value).toEqual('Row 1 title')
+
+      // No phantom out-of-bounds rows. These would correspond to `.10`/`.11`/`.12` being
+      // rewritten through `String.replace('children.1', 'children.5')`.
+      expect(result['children.50']).toBeUndefined()
+      expect(result['children.51']).toBeUndefined()
+      expect(result['children.52']).toBeUndefined()
+      expect(result['children.50.id']).toBeUndefined()
+      expect(result['children.51.id']).toBeUndefined()
+      expect(result['children.52.id']).toBeUndefined()
+      expect(result['children.50.title']).toBeUndefined()
+      expect(result['children.51.title']).toBeUndefined()
+      expect(result['children.52.title']).toBeUndefined()
+    })
+
+    it('row-to-field cleanup should not delete unrelated fields with a textual prefix collision', () => {
+      // `path` = 'children', `lastRenderedPath` = 'children.0'. A sibling field
+      // `childrenOther.0.title` must NOT be deleted by the cleanup loop.
+      const formState: FormState = {
+        children: { valid: true, value: 0, rows: [{ isLoading: false }] },
+        'children.0.id': { value: new ObjectId().toHexString(), valid: true },
+        childrenOther: { valid: true, value: 1, rows: [{ isLoading: false }] },
+        'childrenOther.0.id': { value: new ObjectId().toHexString(), valid: true },
+        'childrenOther.0.title': { value: 'Unrelated field', valid: true },
+      }
+
+      const sourceID = new ObjectId().toHexString()
+      const clipboardData: ClipboardPasteData = {
+        type: 'array',
+        path: 'someOtherArray',
+        fields: [],
+        rowIndex: 0,
+        data: {
+          'someOtherArray.0.id': { value: sourceID, valid: true },
+          'someOtherArray.0.title': { value: 'Pasted row', valid: true },
+        },
+      }
+
+      const result = mergeFormStateFromClipboard({
+        dataFromClipboard: clipboardData,
+        formState,
+        path: 'children',
+      })
+
+      // Unrelated `childrenOther.*` paths survive the cleanup.
+      expect(result.childrenOther).toBeDefined()
+      expect(result['childrenOther.0.id']).toBeDefined()
+      expect(result['childrenOther.0.title']?.value).toEqual('Unrelated field')
+    })
+  })
+
+  describe('exact path matches', () => {
+    // Blocks store the block type under the row key itself (`ctas.1`), with no trailing
+    // segment. Tightening the prefix check must keep matching that exact key, otherwise
+    // copy drops the block type and paste never restores it.
+    it('reduceFormStateByPath should keep the exact row key while filtering digit-prefix siblings', () => {
+      const formState: FormState = {
+        ctas: {
+          valid: true,
+          value: 13,
+          rows: Array.from({ length: 13 }, () => ({
+            blockType: 'callToAction',
+            isLoading: false,
+          })),
+        },
+        'ctas.1': { value: 'callToAction', valid: true },
+        'ctas.1.id': { value: 'id-1', valid: true },
+        'ctas.10': { value: 'callToAction', valid: true },
+        'ctas.10.id': { value: 'id-10', valid: true },
+        'ctas.11': { value: 'callToAction', valid: true },
+        'ctas.11.id': { value: 'id-11', valid: true },
+      }
+
+      const filtered = reduceFormStateByPath({ formState, path: 'ctas', rowIndex: 1 })
+
+      const filteredKeys = Object.keys(filtered).sort()
+      expect(filteredKeys).toEqual(['ctas.1', 'ctas.1.id'])
+      expect(filtered['ctas.1']?.value).toEqual('callToAction')
+    })
+
+    it('paste should copy the exact row key across to the target row', () => {
+      const sourceBlockID = new ObjectId().toHexString()
+      const targetBlockID = new ObjectId().toHexString()
+
+      const formState: FormState = {
+        ctas: {
+          valid: true,
+          value: 2,
+          initialValue: 2,
+          rows: [
+            { id: sourceBlockID, blockType: 'callToAction', isLoading: false },
+            { id: targetBlockID, blockType: 'content', isLoading: false },
+          ],
+        },
+        'ctas.1': { value: 'content', valid: true },
+        'ctas.1.id': { value: targetBlockID, valid: true },
+      }
+
+      const clipboardData: ClipboardPasteData = {
+        type: 'blocks',
+        path: 'ctas',
+        blocks: [],
+        rowIndex: 0,
+        data: {
+          'ctas.0': { value: 'callToAction', valid: true },
+          'ctas.0.id': { value: sourceBlockID, valid: true },
+          'ctas.0.label': { value: 'Source label', valid: true },
+        },
+      }
+
+      const result = mergeFormStateFromClipboard({
+        dataFromClipboard: clipboardData,
+        formState,
+        path: 'ctas',
+        rowIndex: 1,
+      })
+
+      // The block type lives at the exact row key, so pasting must overwrite it.
+      expect(result['ctas.1']?.value).toEqual('callToAction')
+      expect(result['ctas.1.label']?.value).toEqual('Source label')
+    })
+  })
 })

packages/ui/src/elements/ClipboardAction/mergeFormStateFromClipboard.ts

@@ -6,6 +6,14 @@ import type { ClipboardPasteData } from './types.js'
 
 const ObjectId = 'default' in ObjectIdImport ? ObjectIdImport.default : ObjectIdImport
 
+// Strict path-prefix check: matches `prefix` exactly, or any descendant path (`prefix.`).
+// Required because numeric row indices share digit prefixes (`.1` vs `.10`/`.11`), and
+// field names can also share textual prefixes (`children` vs `childrenOther`). A loose
+// `startsWith(prefix)` leaks unrelated keys into clipboard / cleanup operations.
+function isStrictPathPrefix(key: string, prefix: string): boolean {
+  return key === prefix || key.startsWith(`${prefix}.`)
+}
+
 export function reduceFormStateByPath({
   formState,
   path,
@@ -19,7 +27,7 @@ export function reduceFormStateByPath({
   const prefix = typeof rowIndex !== 'number' ? path : `${path}.${rowIndex}`
 
   for (const key in formState) {
-    if (!key.startsWith(prefix)) {
+    if (!isStrictPathPrefix(key, prefix)) {
       continue
     }
 
@@ -102,8 +110,8 @@ export function mergeFormStateFromClipboard({
     for (const fieldPath in formState) {
       if (
         fieldPath !== path &&
-        !fieldPath.startsWith(lastRenderedPath) &&
-        fieldPath.startsWith(path)
+        !isStrictPathPrefix(fieldPath, lastRenderedPath) &&
+        isStrictPathPrefix(fieldPath, path)
       ) {
         delete formState[fieldPath]
       }
@@ -119,7 +127,7 @@ export function mergeFormStateFromClipboard({
     // still be processed so they get regenerated below, preventing server-side duplication.
     if (
       (!pasteIntoField && clipboardPath === `${pathToReplace}.id`) ||
-      !clipboardPath.startsWith(pathToReplace)
+      !isStrictPathPrefix(clipboardPath, pathToReplace)
     ) {
       continue
     }