[IndexTable] Fix issue where bulk actions appear on mobile when no ro…

…ws are selected (#4009) * [IndexTable] Fix issue where bulk actions appear when no rows are selected * added test case
Shopify · Mar 26, 2021 · dd33df1 · dd33df1
1 parent d002f46
commit dd33df1
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -30,6 +30,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed an issue where inline code would be hard to select ([#4005](https://github.com/Shopify/polaris-react/pull/4005))
 - Update `Toast` close button alignment for small views ([#4006](https://github.com/Shopify/polaris-react/pull/4006))
 - Fixed `Collapsible` bug where animation complete logic was being prematurely triggered by transitions in the children ([#4000](https://github.com/Shopify/polaris-react/pull/4000))
+- Fixed `IndexTable` bug where bulk actions are operable when no rows are selected ([#4009](https://github.com/Shopify/polaris-react/pull/4009))
 
 ### Documentation
 

diff --git a/src/components/IndexTable/IndexTable.tsx b/src/components/IndexTable/IndexTable.tsx
@@ -318,6 +318,10 @@ function IndexTableBase({
             isSticky && styles['StickyTableHeader-isSticky'],
           );
 
+          const shouldShowActions = !condensed || selectedItemsCount;
+          const promotedActions = shouldShowActions ? promotedBulkActions : [];
+          const actions = shouldShowActions ? bulkActions : [];
+
           const bulkActionsMarkup = shouldShowBulkActions ? (
             <div className={bulkActionClassNames} data-condensed={condensed}>
               {loadingMarkup}
@@ -330,8 +334,8 @@ function IndexTableBase({
                 selected={bulkSelectState}
                 selectMode={selectMode || isSmallScreenSelectable}
                 onToggleAll={handleTogglePage}
-                promotedActions={promotedBulkActions}
-                actions={bulkActions}
+                promotedActions={promotedActions}
+                actions={actions}
                 paginatedSelectAllText={paginatedSelectAllText}
                 paginatedSelectAllAction={paginatedSelectAllAction}
                 onSelectModeToggle={

diff --git a/src/components/IndexTable/tests/IndexTable.test.tsx b/src/components/IndexTable/tests/IndexTable.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
+import {Sticky} from 'components/Sticky';
 
 import {EmptySearchResult} from '../../EmptySearchResult';
 import {Spinner} from '../../Spinner';
@@ -280,6 +281,14 @@ describe('<IndexTable>', () => {
       onSelectionChange: () => {},
     };
 
+    const width = window.innerWidth;
+
+    afterEach(() => {
+      Object.defineProperty(window, 'innerWidth', {
+        value: width,
+      });
+    });
+
     it('renders bulk actions when selectable', () => {
       const index = mountWithApp(
         <IndexTable {...defaultIndexTableProps} condensed>
@@ -361,5 +370,43 @@ describe('<IndexTable>', () => {
 
       expect(index).not.toContainReactComponent(BulkActions);
     });
+
+    it('does not render bulk actions with onSelectModeToggle unless items are selected', () => {
+      Object.defineProperty(window, 'innerWidth', {
+        value: 300,
+      });
+
+      const promotedActions = [{content: 'PromotedAction'}];
+      const bulkActions = [{content: 'Action'}];
+
+      const index = mountWithApp(
+        <IndexTable
+          {...defaultIndexTableProps}
+          condensed
+          hasMoreItems
+          bulkActions={bulkActions}
+          promotedBulkActions={promotedActions}
+        >
+          {mockTableItems.map(mockRenderCondensedRow)}
+        </IndexTable>,
+      );
+
+      expect(index).not.toContainReactComponent(BulkActions);
+
+      index.find(Sticky)!.find(Button)!.trigger('onClick');
+      expect(index).toContainReactComponent(BulkActions, {
+        actions: [],
+        promotedActions: [],
+      });
+
+      index.setProps({
+        selectedItemsCount: 2,
+      });
+
+      expect(index).toContainReactComponent(BulkActions, {
+        actions: bulkActions,
+        promotedActions,
+      });
+    });
   });
 });