[DataTable] TableBatchActions remains open when selected rows are removed from the tree

[FrivalszkyP]

TableBatchActions remains open when selected rows are removed from the tree: it should take selectedRows.length into account

What package(s) are you using?

• carbon-components-react

Detailed description

Related component: DataTable.

So there’s the TableBatchActions component which opens when you select a row with TableSelectRow. The whole logic is handled internally by DataTable via the shouldShowBatchActions state variable. It works beautifully.

I have a weird edge case, though: in some of our DataTables, we provide the ability to remove the selected rows. Because the rows get removed and not unselected, the TableBatchActions stays open with 0 rows selected.

Looking at how DataTable is implemented, I think it looks like this is a bug. Let me show you why I came to this conclusion.

For the onSelectRow handler, there is this line of code:

https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/DataTable/DataTable.js#L573

This says that the TableBatchActions should remain open if the currently handled TableSelectRow is being unclicked BUT there are other TableSelectRows remaining clicked. So this tells me that the TableBatchActions is expected to be closed when the remaining selected rows count is zero.

So my proposed solution is this. The getBatchActionProps method here:

https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/DataTable/DataTable.js#L394

Should be changed to this:

  getBatchActionProps = (props = {}) => {
    const { shouldShowBatchActions } = this.state;
    const totalSelected = this.getSelectedRows().length;
    return {
      ...props,
      shouldShowBatchActions: shouldShowBatchActions && !!totalSelected,
      totalSelected,
      onCancel: this.handleOnCancel,
    };
  };

Steps to reproduce the issue

1. Open CodeSandbox here: https://codesandbox.io/s/still-wave-zv3kf?file=/src/index.js
2. Select one row
3. Click Remove

Expected result

The TableBatchActions closes automatically

Actual result

The TableBatchActions stays open with no elements selected.

[dakahn]

@FrivalszkyP Excellent writeup. Makes sense to me! Did you have the bandwidth to submit a PR for this change?

[FrivalszkyP]

@dakahn I can certainly do it, thanks!