payloadcms / payloadcms/payload
Modal container blocks UI while dialog items remain invisible
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
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).
Link to the code that reproduces this issue
https://github.com/xenonhammer/payload-cms.git
Reproduction Steps
- Start a Payload CMS application
- Open any confirmation modal (e.g., delete document confirmation, "Stay logged in" modal)
- Observe that the UI becomes unresponsive (clicks don't work)
- Inspect the DOM:
- The container
.payload__modal-containerhas class--enterDone:visibility: visiblepointer-events: allz-index: 101(or value fromvar(--z-modal))
- The
dialogelements inside have:visibility: hidden(from base CSS class.payload__modal-item)- Missing classes:
--appearDone,--enterDone,--enter,--appear, etc.
- The container
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
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 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