payloadcms / payloadcms/payload

Modal container blocks UI while dialog items remain invisible

Open
#14,727 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the Bug

The modal container (.payload__modal-container) receives the --enterDone class and becomes visible and interactive (pointer-events: all, high z-index), but the individual dialog elements inside the container do not receive their corresponding visibility classes (--appearDone, --enterDone, etc.). This results in the container blocking all user interactions (intercepting clicks) while the modal dialogs remain invisible (visibility: hidden).

Image
Link to the code that reproduces this issue

https://github.com/xenonhammer/payload-cms.git

Reproduction Steps
  1. Start a Payload CMS application
  2. Open any confirmation modal (e.g., delete document confirmation, "Stay logged in" modal)
  3. Observe that the UI becomes unresponsive (clicks don't work)
  4. Inspect the DOM:
    • The container .payload__modal-container has class --enterDone:
      • visibility: visible
      • pointer-events: all
      • z-index: 101 (or value from var(--z-modal))
    • The dialog elements inside have:
      • visibility: hidden (from base CSS class .payload__modal-item)
      • Missing classes: --appearDone, --enterDone, --enter, --appear, etc.
Which area(s) are affected? (Select all that apply)

area: ui

Environment Info
This project is configured to use yarn because /home/aviel/work/cms2/package.json has a "packageManager" field

Binaries:
  Node: 20.19.5
  npm: 10.8.2
  Yarn: 4.10.3
  pnpm: N/A
Relevant Packages:
  payload: 3.61.1
  next: 15.4.4
  @payloadcms/db-postgres: 3.61.1
  @payloadcms/drizzle: 3.61.1
  @payloadcms/email-nodemailer: 3.61.1
  @payloadcms/graphql: 3.61.1
  @payloadcms/live-preview: 3.61.1
  @payloadcms/live-preview-react: 3.61.1
  @payloadcms/next/utilities: 3.61.1
  @payloadcms/payload-cloud: 3.61.1
  @payloadcms/plugin-form-builder: 3.61.1
  @payloadcms/plugin-multi-tenant: 3.61.1
  @payloadcms/plugin-nested-docs: 3.61.1
  @payloadcms/plugin-redirects: 3.61.1
  @payloadcms/plugin-search: 3.61.1
  @payloadcms/plugin-seo: 3.61.1
  @payloadcms/richtext-lexical: 3.61.1
  @payloadcms/translations: 3.61.1
  @payloadcms/ui/shared: 3.61.1
  react: 19.1.0
  react-dom: 19.1.0
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Tue Nov 5 00:21:55 UTC 2024
  Available memory (MB): 15954
  Available CPU cores: 32

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 confirmation modal issue and inspect the components that render .payload__modal-container and its dialog elements, using the listed visibility and interaction classes as entry points. Trace why the dialog visibility classes are absent; done means confirmation modals show their dialog content and the surrounding UI remains responsive.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.