Skip to content

fix(ui): add missing React keys in folder list views#17462

Open
traczoskar wants to merge 1 commit into
payloadcms:3.xfrom
traczoskar:fix/ui-folder-react-keys
Open

fix(ui): add missing React keys in folder list views#17462
traczoskar wants to merge 1 commit into
payloadcms:3.xfrom
traczoskar:fix/ui-folder-react-keys

Conversation

@traczoskar

Copy link
Copy Markdown

Description

With folders enabled, published @payloadcms/ui (built with React Compiler) triggers React console warnings:

Each child in a list should have a unique "key" prop.

Folder UI renders ColoredFolderIcon next to a label (and list-view tab buttons) as sibling children. In source TSX this is valid as normal JSX children. After build:reactcompiler, those siblings are emitted as an array of elements without keys, for example:

children: [_jsx(ColoredFolderIcon, {}), getTranslation(...)]

React then warns about missing keys (often attributed to a minified parent from CollectionFolderView).

This PR adds stable key props in the source so they survive the React Compiler build:

  • key="folder-icon" on ColoredFolderIcon in folder breadcrumbs / table / move drawer
  • key="all-tab" | "folders-tab" | "trash-tab" on DefaultListViewTabs buttons

Reproduction

  1. Use a Payload app with folders enabled and the published @payloadcms/ui package (not monorepo source-alias pnpm dev, which points at TSX and does not surface this warning).
  2. Open a collection with folders (e.g. Media) → By Folder view / folder breadcrumbs.
  3. Observe the React key warning in the browser console.

Alternatively, after pnpm turbo build --filter="@payloadcms/ui...", inspect compiled output:

rg 'ColoredFolderIcon, \{\}' packages/ui/dist/views/CollectionFolder/index.js

Before this fix the pattern has no key; after rebuild it should include key: "folder-icon".

Notes

  • Targets 3.x (folder UI). On main this area is being replaced by hierarchy.
  • No intentional behavior change — console warning fix only.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant