Skip to content

Validation error blocks slug field buttons #14827

@jefferyto

Description

@jefferyto

Describe the Bug.

The validation error message for a slug field blocks the Generate and Lock/Unlocks buttons:

Image

There are ways for the user to work around this (the buttons extend below the error message slightly so they are technically still clickable; tabbing with the keyboard to focus the buttons; filling in the Title field to auto-populate the slug field) but it would be better if the buttons or error message can be relocated so they do not overlap.

Reproduction Steps

  1. Checkout reproduction repo, npm install, npm run dev
  2. Open http://localhost:3000/admin, create first user
  3. Create a new Post, click Publish without filling in any fields

Environment Info

Binaries:
  Node: 24.11.1
  npm: 11.6.4
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.66.0
  next: 15.4.8
  @payloadcms/db-sqlite: 3.66.0
  @payloadcms/drizzle: 3.66.0
  @payloadcms/graphql: 3.66.0
  @payloadcms/next/utilities: 3.66.0
  @payloadcms/richtext-lexical: 3.66.0
  @payloadcms/translations: 3.66.0
  @payloadcms/ui/shared: 3.66.0
  react: 19.2.1
  react-dom: 19.2.1
Operating System:
  Platform: linux
  Arch: x64
  Version: #7-Ubuntu SMP PREEMPT_DYNAMIC Sat Oct 18 10:10:29 UTC 2025
  Available memory (MB): 7224
  Available CPU cores: 4

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions