payloadcms / payloadcms/payload
Relationship field: selected value stuck on "Untitled - ID: n" after a failed initial load
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Description
Describe the Bug
On a cold page load, the selected value of a relationship field renders permanently as Untitled - ID: n instead of the related document's useAsTitle. Unselected options in the same dropdown render their titles correctly.
It is not a locale or permissions misconfiguration: the request the field itself issues returns the document with its title (HTTP 200). The label never recovers — it stays Untitled until the component is remounted client-side (e.g. by switching the admin locale, which resets the field and makes the correct title appear).
Because it depends on request timing, it reproduces consistently against a deployed instance and rarely on localhost.
Root cause
Two interacting behaviours in packages/ui/src/fields/Relationship:
-
optionsReducer.ts,ADD— when a load fails (theresponse.status === 403branch inInput.tsxdispatchesADDwithdocs: []andids), a placeholder optionUntitled - ID: nis pushed for every selected id. -
Input.tsx,handleValueChange—idsToLoadfilters out any id that already has an option:const idsToLoad = ids.filter((id) => { return !options.find((optionGroup) => optionGroup?.options?.find((option) => option.value === id && option.relationTo === relation)) })A placeholder counts as "already loaded", so the id is never re-fetched.
-
Even if it were re-fetched,
ADDwould drop it:docs.reduceskips any doc whose id is already inloadedIDs, so the real document can never replace the placeholder.
Net effect: once a placeholder is seeded, the real title can never reach the option.
Steps to Reproduce
- Collection
categorieswithadmin.useAsTitle: 'title'. - Collection
postswith arelationshipfield tocategories, with a value already selected. - Open the
postsedit view with a full page load, against a deployment with real network latency. - The selected chip shows
Untitled - ID: n; the other options in the dropdown show their titles. - Switch the admin locale (or otherwise remount the field) — the correct title appears.
Suggested fix
- In
Input.tsx, treat placeholder options as not loaded so they get re-fetched. Placeholders are the only options created withallowEdit: false, which makes a usable discriminator. - In
optionsReducer.tsADD, when an incoming doc matches an existing placeholder, overwrite its label instead of discarding the doc (theUPDATEbranch already mutatesfoundOption.labelthis way).
Environment
- Payload
3.86.0,@payloadcms/ui3.86.0 - Next.js 16.2.6, Node 22,
@payloadcms/db-postgres - Reproduced on a deployed instance; not reproducible on localhost.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/ui/src/fields/Relationship/Input.tsx and optionsReducer.ts, focusing on the failed-load ADD path and the idsToLoad filter. Reproduce the cold-load relationship field behavior against a deployed instance, then verify that a real document can replace a placeholder and that the selected value displays its useAsTitle instead of Untitled - ID: n.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100