Modal container blocks UI while dialog items remain invisible

[xenonhammer]

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

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