[Bug]: Upload field inside Array (nested in Rich Text) causes UI freeze and becomes non-interactive when adding images

[robinnicholasraja]

Description

When an upload field is placed inside an array field — which itself is nested inside a Lexical rich text block — adding an image via the upload field causes the entire admin UI to completely freeze and become non-interactive. The screen stops responding to any user input (buttons, links, form fields all become unclickable). The only way to recover is to refresh the page, losing any unsaved work.

Environment

• Payload version: 3.79.1
• Node.js version: 22.16.0
• Affected package: @payloadcms/richtext-lexical, @payloadcms/ui
• Database adapter: @payloadcms/db-postgres 3.79.1
• Next.js version: 15.4.11
• React version: 19.2.1
• OS: macOS ARM64 (Darwin Kernel Version 25.3.0)

Steps to Reproduce

1. Clone my fork and install dependencies:

   git clone https://github.com/robinnicholasraja/payload.git
   cd payload
   pnpm install

2. Boot the test admin UI:

   pnpm dev _community

3. Log in with the default test credentials (dev@payloadcms.com / test)
4. Navigate to the Posts collection and create a new post
5. In the Rich Text field, add the "Gallery" block
6. Inside the Gallery block, add a new row to the array
7. In that array row, click the Upload field to select or upload an image
8. Observe: The entire admin UI freezes completely and becomes non-interactive

Expected Behavior

Adding an image through the upload field inside a nested array within a Lexical rich text block should work normally — the image should be selected/uploaded and the UI should remain responsive.

Actual Behavior

The UI becomes completely frozen and non-interactive after attempting to add/select an image via the upload field. No buttons, links, or form fields respond to clicks. A full page refresh is required to recover, and any unsaved work is lost.

Reproduction

Fork: https://github.com/robinnicholasraja/payload

Clone and run:

git clone https://github.com/robinnicholasraja/payload.git
cd payload
pnpm install
pnpm dev _community

The minimal reproduction config is located in test/_community/config.ts.

Additional Context

• A screen recording demonstrating the freeze behavior is attached below.
• The issue does not occur when the upload field is placed directly inside a block (without the intermediate array field).
• The issue does not occur when the upload field is inside an array that is outside of a rich text block.
• This suggests the freeze is specific to the combination of Rich Text (Lexical) → Block → Array → Upload.

Payload-bug.mp4

[tristanvdl]

Hi @robinnicholasraja , I just ran into exactly the same issue, with some even stranger behaviour than what you showed in your video. Any luck finding a fix? My solution for now is adding an image and refreshing, and then repeating this process. This seems to work, but is of course not ideal.

[GermanJablo]

The video isn't mine. Unfortunately, I haven't had time to look into this issue yet.

[tristanvdl]

@GermanJablo Ah my apologies, I tagged the wrong person!

[robinnicholasraja]

Hi @robinnicholasraja , I just ran into exactly the same issue, with some even stranger behaviour than what you showed in your video. Any luck finding a fix? My solution for now is adding an image and refreshing, and then repeating this process. This seems to work, but is of course not ideal.

Hey @tristanvdl, As a temporary workaround, I changed the upload field to use a relationship with the media collection. For now, the media needs to be uploaded to the media collection first before it can be selected here. This still isn’t an ideal solution, so I’m waiting for an official fix. @GermanJablo Could you please let us know once this is taken care. TIA.

[gonzoblasco]

I have been working on a closely related issue — #17232 / PR #17342 — where upload fields inside Lexical blocks lose their values when a drawer opens and closes. The root cause there was that the BlockComponent re-initializes from a stale initialState snapshot when the component is recycled (hide/show via Activity/Offscreen) or hard-remounted.

This issue (#15978) sounds like it could be the same mechanism taken one step further: if the form re-initializes from a stale snapshot while an upload drawer is mid-operation, and the array inside the block has its own nested form state, the reconciliation could enter an infinite loop — which would manifest as a complete UI freeze.

The fact that it only happens with the specific nesting Rich Text (Lexical) → Block → Array → Upload (and not with Block → Upload directly, or Array → Upload outside of Lexical) strongly suggests the issue is in how BlockComponent handles nested form state when arrays are involved.

In PR #17342 I added:

1. A ref to track the latest adopted form state
2. Sync of that ref into initialState on cleanup and mount
3. Merging of missing fields from formData during the initial cache merge

It is possible the same fix resolves this freeze as well, or that an additional edge case exists when arrays are nested inside blocks. Happy to help test if someone can point me to a minimal reproduction setup.