[IndexTable scroll bug] Only render BulkActionButtons when selectMode is true within BulkActions

[mrcthms]

WHY are these changes introduced?

Fixes https://shopify.slack.com/archives/C4Y8N30KD/p1710175615099309

Fixes a bug in the IndexTable where a near instant horizontal scrollbar appears and then disappears on every IndexTable that uses BulkActions.

Investigation

After debugging the issue, it was narrowed down to IndexTables that have a bulkActions / promotedBulkActions prop.

After trying all the usual ways of trying to avoid horizontal scrollbars (setting max-widths on containing elements, setting overflow: hidden on containing elements, and checking for any rogue margin properties causing the scrollbar) and that having no effect, I had to dig deeper.

Looking into the BulkActions JSX itself, as well as the paginated select all text (ruled out as a culprit), we render the More actions button – which uses the BulkActionButton, various promoted action buttons (which use the BulkActionButton), and a hidden measurer component containing a number of BulkActionButton components. Only when all three of these are removed do we see the issue not happening anymore. So I took a look into the BulkActionButton component.

The component itself doesn't do anything too wild. We render a Button and then conditionally wrap it in a Tooltip depending on if it's the button which opens the ActionList containing the list of actions. Looking at the UI when the Tooltip is hovered, you can see that the Tooltip itself overlaps the right hand edge of the container.

I know that Tooltips render in a Portal, so shouldn't be part of the same DOM tree, but wondered if there's some kind of premature rendering happening where it renders in situ before being hoisted into the Portal. So I removed the Tooltip code from the component and just rendered the Button in place.

I was still seeing the issue then, so it was another dead end. I next decided to remove the Button and replace it with a regular button, just out of curiosity more than anything else. This actually fixed the issue, after multiple refreshes I could not replicate the horizontal scrollbar at all.

debug-index-table-issue.mov

But then, after reintroducing the conditional Tooltip logic with the default button, the issue came back again. So it appears these are all most likely red herrings to fix the actual problem.

WHAT is this pull request doing?

So going back to the drawing board, I came up with a different approach which actually solved the issue fully. We currently render the contents of the BulkActions but hide it visually until the selectMode within IndexTable and ResourceList is true, and then we change the opacity and visibility CSS properties of the containing div. Whilst we need to make sure the select all actions and checkbox are rendered due to internal logic in the ResourceList which handles focus management, there is no need for the bulk action buttons to be rendered when in the hidden state. So I used the deprecated selectMode prop on the BulkActions prop to conditionally render the measurer, actions Popover, and promoted actions. By doing this, I un-deprecated the selectMode prop on the Bulk Actions (q – is this okay? I think it should be but just want to check).

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/[email protected]

[alex-page]

This is fine. My only question is did we remove this prop in some implementations and should add it back to ensure this issue doesn't happen again?

[kyledurand]

I think if other implementations hard coded this value they'd see the scrollbar flash? So this should be ok, all of the logic should be handled by index table

[mrcthms]

Only place outside of Polaris where this is used is https://github.com/Shopify/web/blob/8d9f81e1c7b48bd079a41823edbdb16ca16b5815/app/shared/components/ResourceListWithHeader/ResourceListWithHeader.tsx#L666, which already has the selectMode prop passed to it, so we should be good!

[kyledurand]

Just one comment about adding a test to make sure bulk actions actually render in case this gets a big refactor someday

[kyledurand]

Can we add another test to make sure bulk actions render when selectMode is true?

[mrcthms]

@kyledurand All the other tests in the suite have selectMode=true as a default, and they do test for presence of BulkActionButton, albeit indirectly. So it feels like it's a bit of a redundant test, to test specifically that they render given the other tests would fail if they didn't render when selectMode=true

[kyledurand]

I think if other implementations hard coded this value they'd see the scrollbar flash? So this should be ok, all of the logic should be handled by index table