payloadcms / payloadcms/payload

Relationship field: selected value stuck on "Untitled - ID: n" after a failed initial load

Open
#17,425 1 comment 0 reactions 0 assignees View on GitHub

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:

  1. optionsReducer.ts, ADD — when a load fails (the response.status === 403 branch in Input.tsx dispatches ADD with docs: [] and ids), a placeholder option Untitled - ID: n is pushed for every selected id.

  2. Input.tsx, handleValueChangeidsToLoad filters 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.

  3. Even if it were re-fetched, ADD would drop it: docs.reduce skips any doc whose id is already in loadedIDs, 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
  1. Collection categories with admin.useAsTitle: 'title'.
  2. Collection posts with a relationship field to categories, with a value already selected.
  3. Open the posts edit view with a full page load, against a deployment with real network latency.
  4. The selected chip shows Untitled - ID: n; the other options in the dropdown show their titles.
  5. 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 with allowEdit: false, which makes a usable discriminator.
  • In optionsReducer.ts ADD, when an incoming doc matches an existing placeholder, overwrite its label instead of discarding the doc (the UPDATE branch already mutates foundOption.label this way).
Environment
  • Payload 3.86.0, @payloadcms/ui 3.86.0
  • Next.js 16.2.6, Node 22, @payloadcms/db-postgres
  • Reproduced on a deployed instance; not reproducible on localhost.

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.