payloadcms / payloadcms/payload

Array with a single group containing conditional fields does not render on first collapsible expand

Open
#15,613 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: ui Bug stale status: needs-triage
Dominant language
TypeScript
Stars
44.8k
Forks
4.2k
Avg merge
2d 21h
Merged PRs (30d)
53

Description

Describe the Bug

When an array field contains only a single group field that includes conditional fields using admin.condition, the array items inside a collapsible do not render correctly on the first expand after page load.

On the first expand, the array row appears empty sometimes.
If the collapsible is closed and opened again, the content renders correctly.

Link to the code that reproduces this issue

https://github.com/kubyshkin-vladyslav/payload-collapsible-array-bug

Reproduction Steps
  1. Clone the repository:
git clone https://github.com/kubyshkin-vladyslav/payload-collapsible-array-bug
  1. Navigate into the project and copy environment variables:
cd payload-collapsible-array-bug
cp .env.example .env
  1. Start MongoDB:
docker compose up -d mongo
  1. Install dependencies and start the dev server:
pnpm install
pnpm dev
  1. Open http://localhost:3000/admin in your browser and create the first admin user when prompted.
  2. Open http://localhost:3000/admin/globals/header in your browser
  3. In both main and secondary tabs create at least 10 Nav Items.
  4. Collapse all array items (so their collapsed state is stored in preferences).
  5. Refresh the page.
  6. Expand items one by one.

Observed behavior:

  • Some items expand empty on first open
Image
  • If you click “Show all”, there is a higher chance that multiple items expand empty
Image
  1. Collapse and expand the same item again - the content renders correctly.
Which area(s) are affected?

area: ui

Environment Info
Binaries:
  Node: 22.20.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.76.1
  next: 15.4.11
  @payloadcms/db-mongodb: 3.76.1
  @payloadcms/graphql: 3.76.1
  @payloadcms/next/utilities: 3.76.1
  @payloadcms/richtext-lexical: 3.76.1
  @payloadcms/translations: 3.76.1
  @payloadcms/ui/shared: 3.76.1
  react: 19.2.1
  react-dom: 19.2.1
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32545
  Available CPU cores: 20

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

Reproduce the issue using the linked payload-collapsible-array-bug project, starting at /admin/globals/header with collapsed array items containing conditional fields. Trace the admin UI's collapsible array rendering and verify behavior after refresh and first expansion. Done means every item renders its content correctly on the first expand, including when “Show all” is used.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.