Relationship searches on incorrect field

[jjaacckk]

Link to reproduction

No response

Describe the Bug

I have a collection called tracks which has a virtual field called fullTitle (which is used for useAsTitle) and regular field called title. I want to search the title field, so I added title to the listSearchableFields array and index: true to the title field. I am now able to search for tracks at /collections/tracks, but I cannot search for tracks to add when tracks is a relationship field on a different collection called setlists.

When searching for tracks to add to the setlist relationship field tracks only about 10 tracks (the default min) show up and no more will populate when you begin typing.

The issue seems to stem from the fact that the search on collections/track uses where[or][0][title][like]=cat and the search from the setlist relationship field uses where[or][0][fullTitle][like]=cat (which is the virtual field) for some reason.

To Reproduce

1. Create new collection that has a virtual field as useAsTitle and a different field(s) in listSearchableFields
2. Create a few documents (more than 10) for collection 1
3. Create new collection that references collection 1 as a hasMany relationship
4. Try to add existing collection 1 documents to collection 2 by searching within the admin panel in collection 2

Here are the collections I am using for reference:

Here is my Track.ts collection:

import { CollectionConfig } from 'payload/types';

export const Track: CollectionConfig = {
    slug: 'tracks',
    admin: {
        useAsTitle: "fullTitle",
        listSearchableFields: ["title"],
        defaultColumns: ["fullTitle", "album", "releaseYear", "link"]
    },
    access: {
        read: ({ req }) => {
            if (req.user) return true;

            return {
                _status: {
                    equals: 'published',
                }
            };
        },
    },
    versions: {
        drafts: true,
    },
    fields: [
        {
            name: 'fullTitle',
            type: 'text',
            hooks: {
                beforeChange: [
                    ({ siblingData }) => {
                        delete siblingData['fullTitle']
                    }
                ],
                afterRead: [
                    ({ data }) => {
                        let artists_arr = [];
                        for (var i = 0; i < data.artists.length; i++) {
                            artists_arr.push(data.artists[i].artist);
                        }
                        return `${data.title} - ${artists_arr.join(", ")}`;
                    }
                ],
            },
            admin: {
                hidden: true,
            },
        },
        {
            name: "title",
            label: "Title",
            type: "text",
            required: true,
            index: true
        },
        {
            name: "artists",
            label: "Artists",
            type: "array",
            required: true,
            fields: [
                {
                    name: "artist",
                    label: "Artist",
                    type: "text",
                }
            ]
        }
    ]
}

and here is my Setlist.ts collection which uses tracks as a relationship field called tracks:

import { CollectionConfig } from 'payload/types';

export const Setlist: CollectionConfig = {
    slug: 'setlists',
    admin: {
        useAsTitle: "title",
        defaultColumns: ["title", "photos", "tracks", "current"]
    },
    access: {
        read: ({ req }) => {
            if (req.user) return true;

            return {
                _status: {
                    equals: 'published',
                }
            };
        },
    },
    versions: {
        drafts: true
    },
    fields: [
        {
            name: "title",
            label: "Display Date",
            type: "text",
            required: true,
            unique: true
        },
        {
            name: "tracks",
            label: "Tracks",
            type: "relationship",
            relationTo: "tracks",
            hasMany: true,
            required: false,
        },
    ]
}

Here are screenshots of the problem from the UI:

This first image is from /collections/tracks:

and this second is when I try to search for a track to add to a setlist:

As you can see, there should be at least 2 other tracks (besides "cat fancy" as it's already added) that show up for the setlist, but it shows no options.

As stated above, this is because the search on collections/track uses where[or][0][title][like]=cat and the search from the setlist relationship field uses where[or][0][fullTitle][like]=cat (which is the virtual field) for some reason.

Payload Version

2.0.3

Adapters and Plugins

db-mongodb, bundler-vite, richtext-lexical

[DanRibbens]

This isn't going to work the way you intend. Search works off of the values in the database. You can't have a virtual field and search it. useAsTitle can be a virtual field because the afterRead can run on the documents that you see in the list. If you think about how search would have to work on a field that is populated afterRead, every document in the collection would need to be read and then computed on the backend before filtering and returning results. This would be a very bad practice and not work with collections of any reasonably sized document count.

You could solve this by persisting the fullTitle and hide the field in the admin UI.

  // remove this
             hooks: {
                beforeChange: [
                    ({ siblingData }) => {
                        delete siblingData['fullTitle']
                    }
                ],
// optional add:
  admin: {
        hidden: true,
      },

I'm going to close this issue since there isn't anything to be done. Let us know if you have further questions.

[jjaacckk]

Thank you for the information!

I am actually not trying to search on the virtual field. I would only like to search on the title field, but Payload is using the virtual field instead. The title field is the only field in listSearchableFields and the virtual fullTitle field is only used for useAsTitle, but Payload is still using where[or][0][fullTitle][like]=cat and not where[or][0][title][like]=cat in the relationship field search.

This works perfectly when searching /collections/tracks, which is why I don't believe it would be bad practice necessarily. I have a large number of tracks (~1000) and it is extremely fast when searching in the UI. It only does not work when searching for a document from a different collection's relationship field, because it tries searching the fullTitle field instead.

I could make fullTitle a real field, but then I would be needlessly copying existing data. I just want fullTitle (which simply concatenates the title and artist fields) to be the displayed text/title and the real title field to be the one searched upon (as it is the only field listed under listSearchableFields).

Maybe using a virtual field is not the best way to do this, though. Is there a better way to change what is displayed as the text/title on the search results from the relationship field without changing which field(s) Payload uses to search?

I don't believe I am able to reopen this issue myself and maybe this is just expected behavior, but it seems like a bug as the relationship field is not abiding by the listSearchableFields array.

Thanks again for your response!

[jjaacckk]

@DanRibbens do you think I should create a new issue for this? Thank you!

[DanRibbens]

Sorry I missed your comment from 2 weeks ago. We can revisit this. I need to make sure I understand it.

[jjaacckk]

Thank you, I'm sure you're busy with the more pressing issues, so whenever you get around to it is totally fine by me! I'm happy to provide more info or code examples if helpful. Thanks again!

[DanRibbens]

I converted this to a discussion because it is less a bug and more a question about how listSearchableFields works and we need to decide how to make searching in the relationship field work better.

By name, listSearchableFields is a property that only affects the collection list search bar. It was never intended to change the way that relationship fields are searched. I can see why that might be confusing and possibly undesirable.
I'm not sure the best way to proceed so I'll lay out a few options and hopefully get some feedback. These are the options as I see it:

1. Change the search behavrior of relationships to use the listSearchableFields so that you can use it the way you were expected.
2. Add an additional property to the collection called searchableFields that is used in both relationships and the list if listSearchableFields is undefined.

I had considered something with relationships but that won't work because using relationTo arrays would be messy to define which fields to search on and having this granularity on a field by field basis probably won't be helpful.

What do you think?

[jjaacckk]

Thank you for taking a look and coming up with these options! I think the second option sounds the best because the name searchableFields would better suit the functionality (contrasted to changing listSearchableFields's functionality and possibly causing confusion for people already using listSearchableFields).

[olivier5741]

Hi there, I'm encountering the same issue (virtual field as title gives issues for relationship) :

• collection search works perfectly
• relationship search is buggy (the relationship is inside a group) : not finding what I'm looking for, acting strange, ...

If I persist the virtual field used as a title all is fine.

I would say this should be addressed since there is no practical way to have a virtual field as a title. Any option is ok to me (I was expecting option 1 to be out of the box ...), I just need something

Payload is making my life so much easier ;)

The collection config

  admin: {
    useAsTitle: 'name',
    group: 'Structure',
    listSearchableFields: ['givenName', 'familyName']
  },
  fields: [
    {
      name: 'givenName',
      type: 'text',
    },
    {
      name: 'familyName',
      type: 'text',
    },
    {
      name: 'name',
      type: 'text',
      admin: {
        hidden: true, 
      },
      hooks: {
        beforeChange: [
          ({ siblingData }) => {
            delete siblingData['name']
          }
        ],
        afterRead: [
          ({ data }) => {  
            return [data.givenName, data.familyName].filter(n => n).join(' ');
          }
        ],
      },
    },