[Bug]: Click on DataTable filter menu item opens row context menu instead

[btepe]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

v1.34.0

React version

v18.2.0

Description

We have a DataTable with a MultiSelect for filtering in the toolbar and an OverflowMenu in each row. There seems to be a conflict between the dropdown of the multi select and the icon buttons of the context menus underneath:

For some reason, when hovering over one of the checkboxes/labels that are right above one of the context menu triggers, the icon button hover styles are applied and it is clickable. When you click in this area of the checkbox label, the dropdown of the multi select is closed and the context menu of the row is opened.

Reproduction/example

https://stackblitz.com/edit/carbon-v11-fvaiap?file=src%2FApp.jsx

Steps to reproduce

1. Open filter dropdown by clicking on Protocol Filter Options.
2. Hover over one of the checkbox labels, right where the context menu of the data table row is underneath.
3. Click -> Context menu of the row underneath opens and filter menu closes.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[ffshreyansh]

Hello, @btepe

I Tried these minor changes using the zIndex in the given example and it worked as shown in below screenshot.
Can we move ahead with this solution??

[btepe]

@ffshreyansh Thank you for looking into this! In your screenshot, it looks like the underlying context menu can still be clicked from inside the multiselect dropdown. Could you share a forked stackblitz or where you applied the z-index, so I can test it?

[ffshreyansh]

@btepe Sure !! Pls Check here: https://stackblitz.com/edit/carbon-v11-e9nxmi?file=src%2FApp.jsx Line No.: 134
Please let me know if this is what you were looking for the solution or I misunderstood.

[tw15egan]

@btepe @ffshreyansh I tested your example, and it seems like any z-index fixes the issue, and then I remembered I worked on something similar to this a few weeks ago. If you update your example to 1.35.0 the issue should be resolved 😄

[tw15egan]

Closing as resolved, but feel free to let me know if there is something else I need to take a look at 👍🏻

[btepe]

@tw15egan Thank you for looking into this, the issue was indeed resolved by updating to 1.35.0 🎉