beforeInput and afterInput not showing if Field is supplied
Closed this issue · 5 comments
Describe the Bug
Adding a custom field to a component stops before and after input components from appearing.
This makes it impossible to add extra functionality to existing plugins.
For example:
I ran into this whilst trying to add feedback fields through a custom plugin.
The plugin loops through existing config and adds the feedback field as well as a custom afterInput component to better control when this field is visible to none reviewers.
I am using the SEO plugin which has its own custom fields which means my afterInput fields are not displayed for the SEO meta fields even though they have been added to the config.
Link to the code that reproduces this issue
https://github.com/andyrecitearch/payload-after-input-issue
Reproduction Steps
The minimum reproduction has a users collection which has a 'customField' as type text.
The custom field has both Field and afterInput added to it.
When running and viewing the users collection only the Field component is visible.
Not the afterInput component.
Which area(s) are affected? (Select all that apply)
area: core
Environment Info
Binaries:
Node: 21.6.2
npm: 10.2.4
Yarn: N/A
pnpm: 8.5.1
Relevant Packages:
payload: 3.0.0-beta.119
next: 15.0.0
@payloadcms/db-mongodb: 3.0.0-beta.119
@payloadcms/email-nodemailer: 3.0.0-beta.119
@payloadcms/graphql: 3.0.0-beta.119
@payloadcms/next/utilities: 3.0.0-beta.119
@payloadcms/payload-cloud: 3.0.0-beta.119
@payloadcms/richtext-lexical: 3.0.0-beta.119
@payloadcms/translations: 3.0.0-beta.119
@payloadcms/ui/shared: 3.0.0-beta.119
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:36:30 PDT 2024; root:xnu-11215.1.12~1/RELEASE_X86_64
Available memory (MB): 16384
Available CPU cores: 8
Hey @andyrecitearch the way we built this was so that if you specify a custom Field, then it will overwrite everything. Generally, fields that should "inherit" parent props should take care of those props itself.
This means that I think the fix here would be to have our SEO fields "pass through" the afterInput and the beforeInput slots. I will defer to others though here as well!
I agree that the SEO fields should support this as a matter of pragmatism, whereas for your own fields you can use examples from our core repo for adding in the slots to render before/after inputs
@jmikrut @paulpopus Thanks for looking into this
I agree that there is not much use in the before/after inputs if you're using your own field but it would be good to have a way to either dynamically pass through other plugins custom field components (not just SEO plugin) as well as custom field components from users apps/websites or keep the before, after, description... slots available for added functionality/customization?
Not totally sure that there is a way to pass the custom components on to a dynamic custom component that would act as a wrapper for added functionality?
I've added support for before/after inputs via #8958
See for reference config: https://github.com/payloadcms/payload/blob/beta/test/plugin-seo/config.ts#L70
Not totally sure that there is a way to pass the custom components on to a dynamic custom component that would act as a wrapper for added functionality?
Yeah we could do something in the future, the problem is that markup structure is pretty specific so not sure how useful it would be. We do plan to provide more examples going forward and eventually Storybook with component examples
This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.