ResourceList header doesn't render when items is populated after initial render

[andrewpye]

Issue summary

The ResourceList component will render a header under certain conditions. However, when those conditions change after initial render, the header may not appear when it should:

Source for the UI in the above GIF is here. The GIF shows two instances of ResourceList with the same parameters. The first instance is initialised with an empty items list, which is then populated when the button is clicked. The second instance has items populated on initialisation. The GIF shows that the second instance renders the header, whilst the first instance does not, even after items has been populated.

Expected behavior

ResourceList header renders when conditions (e.g. whether items is empty) change after initialisation.

Actual behavior

ResourceList header sometimes does not when conditions change after initialisation.

Reduced test case

Sandbox here. The issue seems to be caused by caching a reference to the initial value of listRef.current on initialisation and reusing that initial value throughout the component's lifetime.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: v3.2.1
• Browser: Google Chrome Version 71.0.3578.80 (Official Build) (64-bit)
• Device: MacBook Pro (Retina, 13-inch, Early 2015)
• Operating System: macOS Sierra Version 10.12.6 (16G29)

[markiiikram]

Hi @andrewpye, Thanks for the detailed issue. @AndrewMusgrave has been looking into the bug. He'll post more details on the fix.

[AndrewMusgrave]

Hi Andrew I fixed a similar issue in a forked resource list this week that I'm going to try to contribute back today or tomorrow. I'll tackle this as well hopefully it can be in our next release