React: DataTable tabbing broken for batch actions.

[Mikadv]

What package(s) are you using?

• [x] carbon-components
• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

When having a DataTable with select-able rows and a batch action associated it's possible to come in a situation where the complete table header vanishes and you aren't able to search or perform any other actions any longer. This can be triggered by simply tabbing through the interface. The Issue is that the once select automatically selects the batch action that is not visible and hence the UI vanishes for this part.

Is this issue related to a specific component?

DataTable

What did you expect to happen? What happened instead? What would you like to see changed?

Tabbing through the side doesn't select the hidden batch action and directly jumps to the search bar of the DataTable.

What browser are you working in?

• Firefox
• Chrome

What version of the Carbon Design System are you using?

10.10.2

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

InstaScan

Steps to reproduce the issue

1. Go to https://react.carbondesignsystem.com/?path=/story/datatable--with-dynamic-content

2. Click on the white part above the table:

3. Press one time the Tab-Button on the keyboard:

4. See that the header vanishes entirely:

See Code Sandbox sample