payloadcms / payloadcms/payload

Media selection modal: "Choose from existing" rows are not clickabl

Open
#17,401 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the Bug

Description
using an upload field in the Payload admin panel and clicking "Choose from existing", the media list opens but the rows/images are not clickable. There is no way to select an existing media file.

Steps to Reproduce

  1. Open the Payload admin panel2. Go to a collection with an upload field (e.g., Pages → Home → Hero Image Carousel).
  2. Click "Choose from existing".
  3. Try clicking on any media row/image in the modal.

Expected Behavior
Clicking a media row should select it and close the modal, attaching the file to the field.

Actual Behavior
Clicking on a row does nothing. modal stays open and no file is selected.

Workaround
Uploading a new file with "Create New" or drag-and-drop works. Only selecting existing files is broken.

Environment

  • Payload version: 3.85.1
  • OS: Windows
  • Browser: (Chrome/Edge/etc.)

Screenshots

Image
Link to the code that reproduces this issue

I can provide a minimal reproduction repository if needed. This occurs in any Payload v3 admin panel with an upload field using the "Choose from existing" media picker.

Reproduction Steps
  1. Start a Payload v3 project with an upload field (e.g., an image field in a global or collection).
  2. Go to the admin panel and open the field.
  3. Click "Choose from existing".
  4. In the media modal, try clicking on any existing media row/image.
  5. The modal does not close and the file is not selected.
Which area(s) are affected?

area: ui

Environment Info
Payload: 3.85.1
Next.js: 16.2.9
Node.js: 22.19.0
OS: Windows
Browser: Chrome/Edge
Package manager: npm

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 a Payload v3 admin panel using an upload field, then trace the admin panel's "Choose from existing" media modal and its existing-media rows. Done means clicking a row selects and attaches the file and closes the modal, while creating or uploading a new file continues to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.