payloadcms / payloadcms/payload

Relationship field with admin appearance set to drawer is not working when the other collection is using richtext as title

Open
#14,050 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the Bug

if you have a relationship field, and set its admin appearance to drawer
for example:

{
  name: 'question',
  type: 'relationship',
  relationTo: 'multiple-choice-questions',
  admin: {
    appearance: 'drawer',
  }
}

then in the multiple-choice-questions collection you have:

{
  slug: 'multiple-choice-questions',
  admin: {
    useAsTitle: 'question',
  },
  fields: [
    {
      name: 'question',
      type: 'richText',
      required: true,
    },
  ]
}

the drawer on the relationship will not work, it will behave strangely, first when try to click the question it tries to take you to the other document edit view and when you click return on broswer then the first collection you were working on becomes unresponsive

Link to the code that reproduces this issue

https://github.com/payloadcms/payload

Reproduction Steps

1- create a collection and give it one richtext field
2-make the richtext as title in colleciton admin property
3- create another colleciotn
4-make a relationship to the first collection in the secone one
5- set the field admin appearnace to drawer
6- run the project
7- go to admin panel
8- create one document for the first collection
9- try to link the created document using the drawer

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info
Binaries:
  Node: 22.19.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.58.0
  next: 15.5.3
  @payloadcms/db-mongodb: 3.58.0
  @payloadcms/email-nodemailer: 3.58.0
  @payloadcms/graphql: 3.58.0
  @payloadcms/next/utilities: 3.58.0
  @payloadcms/payload-cloud: 3.58.0
  @payloadcms/plugin-cloud-storage: 3.58.0
  @payloadcms/plugin-import-export: 3.58.0
  @payloadcms/plugin-stripe: 3.58.0
  @payloadcms/richtext-lexical: 3.58.0
  @payloadcms/storage-s3: 3.58.0
  @payloadcms/translations: 3.58.0
  @payloadcms/ui/shared: 3.58.0
  react: 19.1.1
  react-dom: 19.1.1
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 65274
  Available CPU cores: 32

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 in the admin panel using a relationship field with drawer appearance and a related collection whose richText field is configured as useAsTitle. Start by tracing the relationship drawer and rich-text title handling; done means selecting the related document keeps the drawer usable and returning leaves the original collection responsive.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.