payload icon indicating copy to clipboard operation
payload copied to clipboard

Relationship filter not adding items to dropdown after making request for next page

Open mrstebo opened this issue 1 year ago • 0 comments

Link to reproduction

No response

Describe the Bug

This is an issue I have found in Payload 1.13.4, but have also upgraded to 1.15.8 which has the same issue.

I have a collection called "Group Posts". In that collection I have a field called "Groups" that is a relationship. When I try and filter by the "Groups" field from the Group Posts list page it only brings back the first page when I try and search for a specific group.

Looking at the network tab it is making an initial request with the search criteria in the request. Then, when scrolling to the bottom of the list, it will make another request to page 2 (without the search query string, but maybe that isn't an issue as this is similar behaviour in the latest versions of Payload). However, after this request is made, no new items are added to the dropdown.

To Reproduce

Create a collection called Groups:

import { CollectionConfig } from "payload/types";

export const Groups: CollectionConfig = {
  slug: "groups",
  admin: {
    useAsTitle: "name",
  },
  fields: [
    {
      name: "name",
      type: "text",
      required: true,
    },
  ],
};

Create a collection called GroupPosts:

import { CollectionConfig } from "payload/types";

export const GroupPosts: CollectionConfig = {
  slug: "groupPosts",
  fields: [
    {
      name: "text",
      type: "text",
      required: true,
    },
    {
      name: "group",
      type: "relationship",
      relationTo: "groups",
      hasMany: true,
      required: true,
    },
  ],
};

Update the onInit method so we can create multiple groups. We don't need to create any group posts.

for (let i = 1; i <= 50; i++) {
  await payload.create({
    collection: "groups",
    data: {
      name: `My Group ${i}`,
    },
  });
}

// Create non-related groups
await Promise.all(
  ["Animals", "Axolotl", "Badger", "Cats", "Dogs", "Fish", "Parrot"].map((tagName) =>
    payload.create({
      collection: "groups",
      data: {
        name: tagName,
      },
    }),
  ),
);

Then go to the Group Posts page in the admin area and create a new filter for the Groups field. Enter "My Group", and attempt to scroll past the first batch of results in the dropdown.

Payload Version

1.15.8

Adapters and Plugins

db-mongodb, plugin-cloud-storage, plugin-seo

mrstebo avatar Apr 19 '24 14:04 mrstebo