payloadcms / payloadcms/payload

Lexical upload media drawer disappears and reappears after searching

Open
#17,544 0 comments 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

When choosing an existing upload from a Lexical editor, entering a value in the media drawer search causes the entire drawer to disappear for about one second. It then appears again with the filtered results.

Clearing the search triggers the same behavior.

This reproduces in a blank Payload project using SQLite, a basic Media upload collection, and generated placeholder images. There are no custom admin components or hooks involved.

Expected behavior: the results should update while the drawer remains continuously visible.

Screen recording (MP4)

Possibly related to #15032, although this report specifically concerns the Lexical upload drawer.

Link to the Code That Reproduces This Issue

https://github.com/maybephilipp/payload-lexical-media-drawer-flicker-repro

Reproduction Steps

cp .env.example .env
pnpm install
pnpm seed
pnpm dev
  1. Open http://localhost:3000/admin.
  2. Sign in with admin@example.com / test1234.
  3. Open PostsLexical upload drawer reproduction.
  4. In Content, select Add blockUpload.
  5. Type fol in the media drawer search and wait for the results.
  6. The entire drawer disappears for about one second and then appears again.
  7. Clear the search. The same behavior repeats.

Which Areas Are Affected?

  • area: ui
  • plugin: richtext-lexical

Environment Info

Binaries:
  Node: 22.22.3
  pnpm: 11.6.0

Relevant Packages:
  payload: 3.84.1
  next: 16.2.6
  @payloadcms/db-sqlite: 3.84.1
  @payloadcms/next: 3.84.1
  @payloadcms/richtext-lexical: 3.84.1
  @payloadcms/ui: 3.84.1
  react: 19.2.6
  react-dom: 19.2.6

Database:
  SQLite in the minimal reproduction
  PostgreSQL in the original application

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 the linked minimal reproduction repository, install its dependencies, seed it, and run the development server using the listed commands. Follow the Lexical upload drawer steps and compare searching and clearing the search; done means filtered results update while the drawer remains continuously visible.

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
56/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.