payloadcms / payloadcms/payload
Firefox persists disabled state across reload, causing admin hydration mismatch in @payloadcms/ui
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 using Payload v3 admin in Firefox, a normal page reload can trigger a React hydration mismatch in the admin UI.
The mismatch appears to be caused by hydration-time disabled props in @payloadcms/ui. Firefox restores the previous disabled state of buttons / checkbox inputs across reloads, so the client DOM can contain disabled=true while the server-rendered HTML expects no disabled attribute yet, which causes React to report:
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.
This reproduces in a fresh Payload app and is not specific to custom project code.
Affected controls include:
- list control pills such as
toggle-list-columnsandtoggle-list-filters - draggable column selector pills
- checkbox inputs in the admin
Link to the code that reproduces this issue
https://github.com/visualies/payload-issue
Reproduction Steps
Create a fresh Payload app from the blank template.
Start the app and open the admin in Firefox.
Navigate to a collection list view, for example users.
Do a soft reload.
Which area(s) are affected?
area: ui
Environment Info
Binaries:
Node: 24.11.0
npm: 11.7.0
Yarn: 1.22.22
pnpm: 10.14.0
Relevant Packages:
payload: 3.85.2
next: 16.2.6
@payloadcms/db-sqlite: 3.85.2
@payloadcms/drizzle: 3.85.2
@payloadcms/graphql: 3.85.2
@payloadcms/next/utilities: 3.85.2
@payloadcms/richtext-lexical: 3.85.2
@payloadcms/translations: 3.85.2
@payloadcms/ui/shared: 3.85.2
react: 19.2.6
react-dom: 19.2.6
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 25.5.0: Mon Apr 27 20:41:15 PDT 2026; root:xnu-12377.121.6~2/RELEASE_ARM64_T6041
Available memory (MB): 24576
Available CPU cores: 14
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
Reproduce the issue in a fresh blank-template Payload app by opening a collection list in Firefox and performing a soft reload. Inspect hydration-time disabled props for the toggle-list-columns, toggle-list-filters, draggable column selector pills, and admin checkbox inputs. Done means the affected controls no longer produce a React hydration mismatch after reload.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100