Need help with DataTable > TableToolbarMenu

[nikhilkomakula]

Hello Team,

I am using a DataTable TableToolbarMenu to include a few menu options with checkboxes but the problem is that the menu closes as soon as the user selects or deselects an option. Is there a way to prevent the menu from closing when user selects or deselects multiple options?

Here is the link to code sandbox if you want to take a look:
https://codesandbox.io/s/isaac-sandbox-qp76m

Here is the code:

<TableToolbarMenu
  tabIndex={
    getBatchActionProps().shouldShowBatchActions ? -1 : 0
  }
>
  <TableToolbarAction
    primaryFocus
    onClick={() =>
      this.setState((prevState) => ({
        action1: !prevState.action1
      }))
    }
  >
    <Checkbox
      id="Action 1"
      labelText="HTTP"
      checked={this.state.action1}
    />
  </TableToolbarAction>
  <TableToolbarAction
    onClick={() =>
      this.setState((prevState) => ({
        action2: !prevState.action2
      }))
    }
  >
    <Checkbox
      id="Action 2"
      labelText="HTTPS"
      checked={this.state.action2}
    />
  </TableToolbarAction>
  <TableToolbarAction
    onClick={() =>
      this.setState((prevState) => ({
        action3: !prevState.action3
      }))
    }
  >
    <Checkbox
      id="Action 3"
      labelText="Other"
      checked={this.state.action3}
    />
  </TableToolbarAction>
</TableToolbarMenu>

Thanks in advance.

[cal-smith]

You could try preventDefault or stopPropagation in your onClick, doesn't seem like there's an easy way to prevent the close though. Ultimately it's just an OverflowMenu, you can check out the props here:

carbon/packages/react/src/components/OverflowMenu/OverflowMenu.js

Line 98 in 3974072

static propTypes = {

[joshblack]

Hi there @nikhilkomakula! 👋

Unfortunately, combining the Checkbox and Overflow Menu in this way will cause some accessibility violations 😞

I believe the interaction that would be needed is for the option to be of role menuitemradio and instead, by default, it is menuitem. Similarly, the Checkbox (which uses an <input type="checkbox"> under the hood) wouldn't communicate the aria-checked attribute that is needed along with menuitemradio.

While this isn't a direct example, I believe: https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html captures some of these ideas with the menu dropdowns.

Unfortunately, this is a drawback of OverflowMenu especially when combined with other components that we're hoping to address in our next major release. As it stands, I don't believe you can edit the role of an OverflowMenuItem which makes this behavior hard to implement with the existing set of components.

[nikhilkomakula]

Thanks for your response @joshblack.