Polaris-react: [ResourceList] / ResourceItem do not re-render when updated and selected

Created on 24 Oct 2019  路  5Comments  路  Source: Shopify/polaris-react

Issue summary

ResourceItem in a ResourceList won't re-render when updated and selected.

Example on the Product Details page > Multilocation variants card.

Oct-24-2019 12-53-27

You can also look at this Codesanbox.

Expected behavior

Items should re-render even when they are selected.

Actual behavior

Steps to reproduce the problem

  1. Select items in a resource list
  2. Find a way to update the items (see provided Codesanbox)
  3. Items don't re-render until they are unselected

Reduced test case

I was able to repro the problem in this Codesandbox.

Specifications

System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 2.44 GB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node
    Yarn: 1.12.3 - ~/.dev/yarn/1.12.3/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.11.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 69.0.3
    Safari: 12.1.1
  npmPackages:
    @shopify/polaris: 4.7.1 => 4.7.1 
    react: 16.9.0-alpha.0 => 16.9.0-alpha.0 
    react-dom: 16.9.0-alpha.0 => 16.9.0-alpha.0 
馃悰Bug

Most helpful comment

We are currently re-rendering by updating the key prop on the element.

All 5 comments

I'm facing this issue as well. Is there any workaround to rerender ResourceItem without unselecting it?

We are currently re-rendering by updating the key prop on the element.

+1

+1 can't believe this isn't solved yet

Edit: Solved this by using Ioic-d idea of changing the key prop.
To change the key prop just define it like key={changableVarible && index} .
In case you guys have multiple changing variables key={[changableVarible1,changableVarible2,index]} will work. Good luck!

Thank you, @mako10110 !

Was this page helpful?
0 / 5 - 0 ratings