payloadcms / payloadcms/payload

Firefox persists disabled state across reload, causing admin hydration mismatch in @payloadcms/ui

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

Nobody has claimed this yet.

area: ui 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

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-columns and toggle-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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.