nextui-org
[Feature Request] Make zIndex as a prop for modal and popover
Is your feature request related to a problem? Please describe.
In this codesandbox example, the popover will always on top of the modal, because of the root of popover has a z-index: 100000 inline style.
Describe the solution you'd like
Make zIndex as a prop for modal and popover and don't set any zIndex as default, let us choose what zIndex should be given to the modal/popover like Radix does.
Describe alternatives you've considered
No other thoughts
Screenshots or Videos
No response
I notice that modals always have zIndex: $max value (9999).
This setting produce problems when you want to render any component on top of modal. For example custom select with menu. Menu should be on top of modal with scrolling. Even if you use portals menus can't be higher than modal too.
You can give the Popover content a different z-index using <Popover.Content css={{ zIndex: "unset !important" }}>. The !important is required, because the Popover content container has the z-index set using element.style.
https://codesandbox.io/s/next-ui-modal-z-index-forked-dmib1x?file=/src/app.tsx
Alternatively, maybe close the Popover when you open the modal? Interacting with the modal itself closes the Popover anyway.
