Skip to content

Array field: Reordering items followed by deletion creates a ghost item #15889

@ed-cscosta

Description

@ed-cscosta

Describe the Bug

When reordering items in an array field (via drag-and-drop) and then deleting any item from the list, a ghost item is occasionally created. This ghost item is visible in the UI but disappears only after a full page reload.

output.video-cutter-js.com.mp4

As shown in the video, after removing the item at index 24, it reappears as a ghost entry.
One important observation: the issue does not reproduce when autosave is disabled, which suggests the bug may be related to the autosave mechanism interfering with the array field's state after a reorder + delete sequence.

Link to the code that reproduces this issue

https://github.com/ed-cscosta/payload-array-field-ghost

Reproduction Steps

  1. Create a simple collection:
import type { CollectionConfig } from 'payload'

export const Test: CollectionConfig = {
  slug: 'test',
  admin: {
    useAsTitle: 'title',
  },
  fields: [
    {
      name: "title",
      type: "text",
    },
    {
      name: "test",
      type: "array",
      fields: [
        {
          name: "title",
          type: "text",
        },
        {
          name: "description",
          type: "text",
        },
      ],
    }
  ],
  versions: {
    drafts: {
      autosave: true,
    }
  }
}
  1. Open a document with an array field containing multiple items
  2. Reorder the items by dragging one to a new position
  3. Delete any item from the array
  4. Observe a ghost item remaining in the list (This is difficult to reproduce with a simple collection, but you can check in the video)

Which area(s) are affected?

area: ui

Environment Info

Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 10.31.0
Relevant Packages:
  payload: 3.79.0
  next: 15.4.11
  @payloadcms/db-sqlite: 3.79.0
  @payloadcms/drizzle: 3.79.0
  @payloadcms/graphql: 3.79.0
  @payloadcms/next/utilities: 3.79.0
  @payloadcms/richtext-lexical: 3.79.0
  @payloadcms/translations: 3.79.0
  @payloadcms/ui/shared: 3.79.0
  react: 19.2.1
  react-dom: 19.2.1
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.3.0: Wed Jan 28 20:53:15 PST 2026; root:xnu-12377.81.4~5/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8

Metadata

Metadata

Assignees

Labels

Bugarea: uiRelated to the admin panel.

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions