Skip to content

feat(ui): make select and relationship field placeholder configurable #12253

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

tak-amboss
Copy link
Contributor

What?

Allows to overwrite the default placeholder text of select and relationship fields.

Why?

The default placeholder text is generic. In some scenarios a custom placeholder can guide the user better.

How?

Adds a new property admin.placeholder to relationship and select field which allows to define an alternative text or translation function for the placeholder. The placeholder is used in the form fields as well as in the filter options.

Screenshot 2025-04-29 at 15 28 54
Screenshot 2025-04-29 at 15 28 19

Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds support for configurable placeholder text for select and relationship fields in both the admin interface and filter options. Key changes include:

  • Introducing a new admin property (admin.placeholder) in select and relationship field configurations.
  • Updating UI components to propagate and render the custom placeholder.
  • Adding end-to-end tests to verify placeholder functionality in list and edit views.

Reviewed Changes

Copilot reviewed 13 out of 15 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
test/admin/slugs.ts Added new slug for placeholder collection
test/admin/e2e/list-view/e2e.spec.ts Added new tests to check placeholder functionality
test/admin/config.ts Config updated to include the new Placeholder collection
test/admin/collections/Placeholder.ts New collection for testing placeholder fields
packages/ui/src/fields/Select/index.ts Propagates placeholder from admin config into Select field
packages/ui/src/fields/Select/Input.ts Updates to support placeholder in select input component, includes a debugging log
packages/ui/src/fields/Relationship/index.ts Propagates placeholder into the Relationship field component
packages/ui/src/elements/WhereBuilder/Condition/* Updated types and usage to include placeholder for filters
packages/ui/src/elements/ReactSelect/* Updated to support placeholder translation
packages/payload/src/fields/config/types.ts Updated field configuration types to include a placeholder prop
Files not reviewed (2)
  • docs/fields/relationship.mdx: Language not supported
  • docs/fields/select.mdx: Language not supported

@DanRibbens DanRibbens enabled auto-merge (squash) May 1, 2025 18:54
@DanRibbens DanRibbens merged commit e568391 into payloadcms:main May 1, 2025
76 checks passed
Copy link
Contributor

github-actions bot commented May 5, 2025

🚀 This is included in version v3.37.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants