✨ Feature Request: Pass DefaultFilter props to custom filter components in Condition

[Furqankhanzada]

Description

Currently, when using a custom filter component in Payload CMS, it does not receive the same props as the DefaultFilter component. This creates limitations for developers who want to fully replace or extend the filtering UI while still leveraging the same props (booleanSelect, filterOptions, operator, etc.).

Example (from Condition component: packages/ui/src/elements/WhereBuilder/Condition/index.tsx)

<div className={`${baseClass}__value`}>
  {RenderedFilter || (
    <DefaultFilter
      booleanSelect={booleanSelect}
      disabled={
        !operator || !reducedField || reducedField?.field?.admin?.disableListFilter
      }
      filterOptions={filterOptions}
      internalField={reducedField}
      onChange={setInternalValue}
      operator={operator}
      options={valueOptions}
      value={internalValue ?? ''}
    />
  )}
</div>

💡 Proposal
Allow custom filter components to receive the same props as DefaultFilter so they can be:

✅ Drop-in replacements with access to the same filtering data.
✅ Easier to extend or customize without duplicating logic.
✅ More consistent with Payload’s flexibility and developer experience.

[siimsams]

+1

I need to create a custom component for translating values to another unit. It's currently impossible due to missing props. Although the docs say that props should be available. In reality we don't get any props defined in the docs. Only the ones we pass ourselves.

This means that using custom component is on paper there but it's unusable because I can't hook into the existing logic of payloadCMS.

Looking into this to create a PR for it.

EDIT:

Gave up for today. Looks like the custom component is being prerendered and the following was not working.

 <div className={`${baseClass}__value`}>
  {RenderedFilter ? (
    React.cloneElement(RenderedFilter as React.ReactElement<DefaultFilterProps>, {
      booleanSelect,
      disabled: !operator || !reducedField || reducedField?.field?.admin?.disableListFilter,
      filterOptions,
      internalField: reducedField,
      onChange: setInternalValue,
      operator,
      options: valueOptions,
      value: internalValue ?? '',
    })
  ) : (
    <DefaultFilter
      booleanSelect={booleanSelect}
      disabled={
        !operator || !reducedField || reducedField?.field?.admin?.disableListFilter
      }
      filterOptions={filterOptions}
      internalField={reducedField}
      onChange={setInternalValue}
      operator={operator}
      options={valueOptions}
      value={internalValue ?? ''}
    />
  )}
</div>