Skip to content

Modal container blocks clicks on create-first-user page when empty #15288

@blaesild

Description

@blaesild

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

  1. Deploy Payload to a fresh database (no users exist)
  2. Navigate to /admin/create-first-user
  3. Try to click on the email or password input fields
  4. 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:

  1. Set pointer-events: none on the container by default, only enable on .payload__modal children
  2. Don't render the container element at all when no modal is open
  3. 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.

Metadata

Metadata

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions