Fields with custom components ignore admin condition

[oranoran]

Bug Report

A field with a custom component ignores the provided condition function, and always renders.

Expected Behavior

If the condition function evaluates to false, it should not render.

Steps to Reproduce

See the reproduction repo.

This has 2 fields with the same condition - a regular text field, and a text field with a custom component.
The field with the custom component always renders, regardless of the condition outcome.

Detailed Description

Payload 14.0 and 0.14.24-beta.0

[jmikrut]

Hey @oranoran — this should actually be documented but it is actually functioning as intended, however the intended functionality could be up for debate.

Right now, we export withCondition as a HOC from payload/components/forms. You can wrap your custom component with this HOC and then boom - conditions work.

The question is - should this be done for you? The reason that we did not auto-wrap custom components in withCondition is because sometimes you might want to control conditions yourself as part of the custom component - for example, this discussion.

I'll move this over to a discussion but I'd like to keep the convo going!

[oranoran]

Generally I would say if something needs to be customized, that should be an option. But the regular behavior, i.e. applying any condition specified, should be the default. If you want to "customize" by not having a condition, you wouldn't be specifying any condition anyway...

Also in this particular example, taken from our real app, withCondition fails to wrap the component due to TS typing issues:

Renaming to MarkdownFieldInner and adding this:
export const MarkdownField = withCondition(MarkdownFieldInner)

Yields this:

Argument of type 'FunctionComponent<FieldWithPath>' is not assignable to parameter of type 'ComponentType<Record<string, unknown>>'. Type 'FunctionComponent<FieldWithPath>' is not assignable to type 'FunctionComponent<Record<string, unknown>>'. Types of parameters 'props' and 'props' are incompatible. Type 'PropsWithChildren<Record<string, unknown>>' is not assignable to type 'PropsWithChildren<FieldWithPath>'. Type 'PropsWithChildren<Record<string, unknown>>' is not assignable to type 'FieldBase & { type: "array"; minRows?: number; maxRows?: number; labels?: Labels; fields?: Field[]; } & { path?: string; } & { children?: ReactNode; }'. Type 'PropsWithChildren<Record<string, unknown>>' is not assignable to type 'FieldBase'.ts(2345)

BTW there is a typo in the documentation page, <p/> instead of </p>.

[jmikrut]

I think you're right. We could add withCondition to custom fields quite quickly.

That will also solve the typing issue, but I'm not actually able to replicate that. What is the type of the props for your MarkdownFieldInner component?

[oranoran]

type FieldWithPath = Field & { path?: string }

I created a with-condition branch in the demo repo, with an exact reproduction.

[jmikrut]

Ahhh yep. I now see what you're saying. Just committed a fix to the types for the withCondition method. This will be published within the next few days!