payloadcms / payloadcms/payload
Lexical upload media drawer disappears and reappears after searching
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.
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
- Open
http://localhost:3000/admin. - Sign in with
admin@example.com/test1234. - Open Posts → Lexical upload drawer reproduction.
- In Content, select Add block → Upload.
- Type
folin the media drawer search and wait for the results. - The entire drawer disappears for about one second and then appears again.
- Clear the search. The same behavior repeats.
Which Areas Are Affected?
area: uiplugin: 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
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 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