Relationship filterOptions does not update accordingly.

[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.

[HarleySalas]

Here are two recordings to try and illustrate the issue. Take note of how after certain actions, the option to select something which should be selectable disappears. There's a few funky things going on there, but I think the picture can provide more clarity than words.

https://github.com/payloadcms/payload-3.0-demo/assets/38236585/fac6a32f-1ad5-4924-8812-c563f63f6b40

https://github.com/payloadcms/payload-3.0-demo/assets/38236585/b94af0c8-f32b-437a-acdd-c8e26be54541