payloadcms / payloadcms/payload

reordering blocks using a beforeChange hook mixes up block types in the admin UI and can lead to corrupted documents

Open
#12,368 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

created-by: Contributor status: needs-triage
Dominant language
TypeScript
Stars
44.8k
Forks
4.2k
Avg merge
2d 21h
Merged PRs (30d)
53

Description

Describe the Bug

I have a use case where I need to reorder blocks based on dates using a beforeChange hook.
However when reordering the blocks the UI seem to mix up blocks types and contents.

In the reproduction repo I have setup a very simple Pages example that sorts blocks in descending order and can reproduce the main issue.

In a more complex example I have managed to corrupt blocks data after the third save with an incorrect state in the admin UI.

Link to the code that reproduces this issue

https://github.com/ioExpander/payload-issue-blocksReorder.git

Reproduction Steps

pnpm install && pnpm dev
create .env file using .env.example
create admin account
create and save an empty page, then follow instructions to add blocks
Add block one, title "one" order "1", save the Page document
Add block two, title "two" order "2", save the page document

The blocks are saved but the admin UI is confused between blocks types (ie : block 01 is of type one but has block two contents)

Image

Adding block `three, title "three" order "3" etc will continue producing the same bug.

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info
Binaries:
  Node: 20.19.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 10.6.4
Relevant Packages:
  payload: 3.33.0
  next: 15.3.0
  @payloadcms/email-nodemailer: 3.33.0
  @payloadcms/graphql: 3.33.0
  @payloadcms/next/utilities: 3.33.0
  @payloadcms/payload-cloud: 3.33.0
  @payloadcms/richtext-lexical: 3.33.0
  @payloadcms/translations: 3.33.0
  @payloadcms/ui/shared: 3.33.0
  react: 19.1.0
  react-dom: 19.1.0
Operating System:
  Platform: linux
  Arch: x64
  Version: #32~22.04.1-Ubuntu SMP Thu Apr  3 20:26:27 UTC 2025
  Available memory (MB): 7938
  Available CPU cores: 2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction repository and follow the documented save sequence using the beforeChange hook and reordered blocks. Inspect the admin UI state after each save, especially how block types and contents are matched. Done means blocks remain aligned with their types and contents after repeated saves and reordering.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
backend, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.