Merge pull request #1224 from Shopify/rs-sm

[ResourceList] Fix selectMode when programmatically setting selectedItems
Shopify · Mar 20, 2019 · 0e7dc29 · 0e7dc29
2 parents 0922026 + 0db3c7c
commit 0e7dc29
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -20,6 +20,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Fixed selectMode on `ResourceList` not toggling when items are selected programmatically ([#1224](https://github.com/Shopify/polaris-react/pull/1224))
 - Fixed unnecessary height on `TextField` due to unhandled carriage returns ([#901](https://github.com/Shopify/polaris-react/pull/901))
 - Ensured server side rendering matches client side rendering for [embedded app components](https://github.com/Shopify/polaris-react/blob/master/documentation/Embedded%20apps.md#components-which-wrap-shopify-app-bridge) ([#976](https://github.com/Shopify/polaris-react/pull/976))
 - Fixed rendering of the spinner on `TextField` when setting to readOnly ([#1118](https://github.com/Shopify/polaris-react/pull/1199))

diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx
@@ -311,6 +311,15 @@ export class ResourceList extends React.Component<CombinedProps, State> {
   componentWillReceiveProps(nextProps: Props) {
     const {selectedItems} = this.props;
 
+    if (
+      nextProps.selectedItems &&
+      nextProps.selectedItems.length > 0 &&
+      !this.state.selectMode
+    ) {
+      this.setState({selectMode: true});
+      return;
+    }
+
     if (
       selectedItems &&
       selectedItems.length > 0 &&

diff --git a/src/components/ResourceList/tests/ResourceList.test.tsx b/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -663,6 +663,21 @@ describe('<ResourceList />', () => {
       );
       expect(resourceList.find(BulkActions)).toHaveLength(1);
     });
+
+    it('enables select mode when items are programmatically selected', () => {
+      const resourceList = mountWithAppProvider(
+        <ResourceList
+          items={singleItemWithID}
+          renderItem={renderItem}
+          bulkActions={bulkActions}
+          selectedItems={[]}
+        />,
+      );
+
+      expect(resourceList.find(BulkActions).prop('selectMode')).toBe(false);
+      resourceList.setProps({selectedItems: ['1']});
+      expect(resourceList.find(BulkActions).prop('selectMode')).toBe(true);
+    });
   });
 });