If I use Dropddown or ComboBox in TableToolbarMenu, the popup menu will be closed upon selecting an option

[akmalmzamri]

If I use Dropddown or ComboBox in TableToolbarMenu, the popup menu will be closed upon selecting an option

What package(s) are you using?

• @carbon/icons-react - 10.13.0
• carbon-components - 10.15.0
• carbon-components-react - 7.15.0

Detailed description

Describe in detail the issue you're having.

Basically whenever I select an option in Dropdown or Combobox, the TableToolbarMenu popup will be closed. This behavior is not seen with Select

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

I expect the behavior to be the same with Select

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

10.15.0

Please create a reduced test case in CodeSandbox

• React:
  https://codesandbox.io/s/carbon-components-react-7uqsd?file=/src/index.js

[tw15egan]

Must have something to do with the click handler, using the keyboard to make a selection doesn't cause the menu to close 🤔

[akmalmzamri]

@tw15egan Is there any way for me to override the click handler?

[akmalmzamri]

Any estimation on when will this issue be fixed?

[tanoargie]

Any update on this?

[tanoargie]

handleClickOutside = (evt) => {
    if (
      this.state.open &&
      (!this._menuBody || !this._menuBody.contains(evt.target))
    ) {
      this.closeMenu();
    }
  };

The issue seems to be related to the OverflowMenu component. It has a click listener that is triggered if the user clicks outside the overflow menu (the handleClickOutside method in OverflowMenu.js). When clicking in the combobox/dropdown list, it checks if the list is contained in the menuBody (as it is rendered when clicking the combobox, not when opening the menu) and therefore closes the menu. I think the proper solution would be to bind the combobox/dropdown lists to the menuBody when opened or check if menuBody contains some parent. I made a quick workaround that checks if target is a list with the className but I think a more thorough fix should be implemented.
I hope this helps the team to find a solution!