Description
The @faceless-ui/modal container blocks form field clicks on the /admin/create-first-user page because the container element has pointer-events: all even when no modal content is rendered.
Steps to Reproduce
- Deploy Payload to a fresh database (no users exist)
- Navigate to
/admin/create-first-user
- Try to click on the email or password input fields
- Clicks may be blocked by an invisible element
Root Cause Analysis
The modal container element exists in the DOM with state classes like payload__modal-container--enterDone and has pointer-events: all set. However, on the create-first-user page:
- No actual modal content (
.payload__modal) is rendered inside the container
- The empty container with
pointer-events: all creates an invisible click blocker
- Form inputs beneath the container become unclickable
Attempted Workaround (Caused Side Effects)
We tried adding CSS to disable pointer events on the container:
.payload__modal-container,
.payload__modal-container--enterDone,
/* ... other states */ {
pointer-events: none !important;
}
.payload__modal-container .payload__modal {
pointer-events: auto !important;
}
Problem: This broke the media library drawer and confirmation dialogs because:
- Drawers use
.payload__modal-container but their content is in .drawer, not .payload__modal
- The blanket
pointer-events: none caused clicks to fall through to elements behind the drawer
Expected Behavior
The modal container should not block clicks when it has no visible modal content. Possible solutions:
- Set
pointer-events: none on the container by default, only enable on .payload__modal children
- Don't render the container element at all when no modal is open
- Use
pointer-events: none on container states that have no active modal content
Environment
- Payload Version: 3.67.0
- Next.js Version: 15.5.7
- Node Version: 20.x || 22.x
- Database: PostgreSQL (Supabase)
Additional Context
Our current workaround is to seed the first user programmatically via onInit hook, bypassing the create-first-user UI entirely. This works but doesn't address the underlying issue for other Payload users.
Description
The
@faceless-ui/modalcontainer blocks form field clicks on the/admin/create-first-userpage because the container element haspointer-events: alleven when no modal content is rendered.Steps to Reproduce
/admin/create-first-userRoot Cause Analysis
The modal container element exists in the DOM with state classes like
payload__modal-container--enterDoneand haspointer-events: allset. However, on the create-first-user page:.payload__modal) is rendered inside the containerpointer-events: allcreates an invisible click blockerAttempted Workaround (Caused Side Effects)
We tried adding CSS to disable pointer events on the container:
Problem: This broke the media library drawer and confirmation dialogs because:
.payload__modal-containerbut their content is in.drawer, not.payload__modalpointer-events: nonecaused clicks to fall through to elements behind the drawerExpected Behavior
The modal container should not block clicks when it has no visible modal content. Possible solutions:
pointer-events: noneon the container by default, only enable on.payload__modalchildrenpointer-events: noneon container states that have no active modal contentEnvironment
Additional Context
Our current workaround is to seed the first user programmatically via
onInithook, bypassing the create-first-user UI entirely. This works but doesn't address the underlying issue for other Payload users.