Allow for disabling fields in List column selector

[CherryDT]

Link to reproduction

No response

Describe the Bug

When I have a top-level UI field that has a condition, loading the form crashes the admin with the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
    at getSiblingData (main.js:126498:14)
    at WatchCondition (main.js:134797:53)
    at renderWithHooks (main.js:179442:18)
    at mountIndeterminateComponent (main.js:183206:13)
    at beginWork (main.js:184719:16)
    at HTMLUnknownElement.callCallback (main.js:167301:14)
    at Object.invokeGuardedCallbackDev (main.js:167350:16)
    at invokeGuardedCallback (main.js:167414:31)
    at beginWork$1 (main.js:190583:7)
    at performUnitOfWork (main.js:189689:12)

It seems the problem is that path is undefined.

It works with the ugly workaround of giving the field a name and adding a beforeChange hook which removes it from the data again.

Interestingly, when the field is within a tab (even one without a name!), it doesn't crash.

To Reproduce

Create a top-level UI field like this:

{
  type: 'ui',
  admin: {
    condition: () => true, // Without this there is no error
    components: {
      Field: SomeComponent
    }
  }
}

Payload Version

2.14.2

Adapters and Plugins

db-mongodb, bundler-webpack

[jmikrut]

Hey there - the ui field type actually requires a name property, but that does not mean that its data will be added to the resulting data. You should be seeing a TypeScript error noting that the field is invalid without a name property.

Are you seeing something different?

[CherryDT]

I'm not using TypeScript.

But yes, this explains it, I didn't realize that the behavior of name is inconsistent across the different "container" components! I thought it's like with the tabs component where depending on whether you use name or not, the fields get grouped in a sub-object or not. (It does seem to "half-work" as well, as the fields do get grouped into a sub-object, but then other things fail like this one.)

[CherryDT]

@jmikrut Hm but then how do I get rid of those fields here?

[CherryDT]

I found a workaround, but of course it's not ideal.

I can just set the name to '' and then everything works.

To get rid of the empty boxes, I then use this CSS:

.column-selector__column:has(.pill__label:empty) {
  display: none;
}

[jmikrut]

For UI fields in specific, there is no good way to allow for disabling columns from being selected without custom CSS at the moment. But, we should build that. It would be a super easy thing for us to add as a feature.

Maybe we add an admin.disableTableColumn property or similar, which, if you set to true, then the column would be omitted from being able to be selected in the table view.

I will convert this to a Feature Request so that we can implement that accordingly!

Until then, I think your CSS trick is probably the best way.

[franciscolourenco]

admin.disableListColumn landed in v2.16.0, although it currently fails field validation for UI fields.

[DanRibbens]

I'm making a quick PR to fix this right now.

[DanRibbens]

While adding this I realized it would make way more sense to automatically hide the field from the list when a field doesn't have a Cell component.

[franciscolourenco]

That would also make sense. Also, is field.name required because of the list view? If so, we could make it optional too?