Skip to content

Relationship filterOptions does not update accordingly. #6461

@HarleySalas

Description

@HarleySalas

In the following reproduction, I have a collection of Movie, Theatre and Upload.

An Upload belongs to a Theatre.
A Movie is owned by a Theatre.

An Upload should only be assignable to a Movie, where the Movie's movie.theatre id is equal to the upload.theatre id.

As it stands, the following code works out for this logic:

  {
          name: 'theatre',
          type: 'relationship',
          relationTo: COLLECTION_SLUG_THEATRE,
          hasMany: false,
          admin: {
            allowCreate: false,
            width: '50%',
          },
        },
        {
          name: 'upload',
          type: 'relationship',
          relationTo: COLLECTION_SLUG_UPLOAD,
          admin: {
            allowCreate: false,
            width: '50%',
          },
          unique: true,
          filterOptions: ({ data }) => {
            if (data.theatre) {
              return {
                theatre: {
                  equals: data.theatre,
                },
              }
            } else return false
          },
        },

However, If you have TheatreA selected, and select UploadA, then change video.theatre to TheatreB, UploadA is not removed. The user experience is seemingly impossible to make reasonable, with making entirely custom field components. You can play around with it and see numerous scenarios where the filterOptions is not fixed until refreshing the page, as well. For example, it's possible to have both UploadA and UploadB selectable in the select component, which should certainly never happen.

I believe that in this scenario, it should not only ensure that the filterOptions are always correct, but it should remove a selected item, if it's not present in the filterOptions.

If you'd like to clone the reproduction, to easily play around with this, you can follow these instructions:

  1. Run git clone -b filter-options-wont-update https://github.com/HarleySalas/payload-3-reproductions.git
  2. Run pnpm install
  3. Change .env.example to .env
  4. Run docker-compose up
  5. Run pnpm dev
  6. Go to http://localhost:3000/admin/collections/movie and select a Movie

There is no need to modify anything inside of .env. All necessary data will be seeded.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions