Using a TreeSelect on top of Modal, the window is closed when selecting a value

What package(s) are you using?

• carbon-components
• carbon-components-react

Summary

I’m trying to use a TreeSelect component (nested drop down) on top of a Modal. Tried using 2 components: one is from antd and the second from rsuite.

In both I had to change the style of the dropdown values list and update the z-index to very high value (10000) in order to get the dropdown values shown on top of the Modal. (I guess because in carbon css the Modal is using a high z-index value to keep it on top)

But in both I’m facing an issue with the Modal getting closed when choosing an element from the ddl !!!

I tried using the e.preventDefault() / e.persist() but with no luck.

Relevant information

To reproduce it: https://codesandbox.io/s/antd-reproduction-template-ci559

[asudoh]

Seems that the CodeSandbox example uses a 3rd-party floating menu. From that:

1. <Modal> has selectorsFloatingMenus prop so your app can tell <Modal> that there are additional floating menus used in your app. You can debug code corresponding to https://github.com/carbon-design-system/carbon/blob/v10.9.0/packages/react/src/components/Modal/Modal.js#L181-L192 in your node_modules/carbon-components-react.
2. Given the 3rd-party component nature, we cannot guarantee the integration works well out-of-the-box, such as, z-index coordination
3. Also given the 3rd-party component nature, it drifts away from Carbon design ecosystem. In case you haven’t, I recommend you work with your designer to see a design that fits in Carbon design ecosystem for your feature. It may yield usage of combination of existing Carbon components (with existing feature set)

[zbeedatm]

It can be done, but need to check what is the target from the close event and just if it’s comming from the drop down to prevent it.

But what I’m saying, that both issues:

1. the need foe customizing the z-index
2. customizing the close event

are not needed when using other Modal of other libraries, so maybe there is a place to make it working out of the box without any customization… if not, simply will live wit it.