ResourceList search query filter behaving incorrectly with selectable items

[eadanfahey]

Issue summary

I have a selectable ResourceList with a search filter. The search filter works correctly when no items are selected. However, when an item is selected, the search filter displays items in the list which do not match the query.

Expected behavior

When a selectable ResourceList has at least one item selected, the search filter should show only items matching the queryValue.

Actual behavior

The video below demonstrates the issue. Notice that when I select an item in the resource list, one of the items displayed does not match the search query. The code for this example is based on a stripped-down form of the "With filtering" example provided in the Polaris docs (https://polaris.shopify.com/components/resource-list).

https://user-images.githubusercontent.com/6443106/188864590-69a6d6a2-cf28-4f7c-b8b2-e9ce1c0e84aa.mov

Steps to reproduce the problem

1. Go to my demonstration at https://codesandbox.io/s/friendly-surf-gnz0vp?file=/App.js
2. With no items selected, search "Jemison". The items displayed in the list are correct.
3. Select the first item ("Mae Jemison").
4. Search "Jemison" again. This time, the list incorrectly shows "Ellen Ochoa" in the list.

Reduced test case

https://codesandbox.io/s/friendly-surf-gnz0vp?file=/App.js

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 10.0.0
• Browser: Chrome 104
• Device: Mac
• Operating System: MacOS 12

[ghost]

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[tom-engineering]

A potential workaround that I can see from your example is you include an id prop on your <ResourceItem> returned in your renderItem function but not a key. Including key causes the list to render correctly on update:

  function renderItem({ id, name }) {
    return (
      // Added `key` here
      <ResourceItem id={id} key={id}>
        <h3>{name}</h3>
      </ResourceItem>
    );
  }

[github-actions[bot]]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.