📝[RFC] Support zIndexContext to manage popup's zIndex in Pop-up container

[kiner-tang]

Summary

At present, in many pop-up containers, such as Modal, Drawer, Popover, etc., some internal elements with pop-up interaction, such as Select, Dropdown, etc., often appear when the pop-up box of these elements is missing during operation.

The root cause is that these pop-ups are implemented in a way that is separated from the parent element, which causes the z-index of the current element to be smaller than that of the popup container, and eventually the popup is blocked by the container and not visible.

Currently we can solve this problem by configuring getPopupContainer in the ConfigProvider to specify the parent of the current element, but there are still some drawbacks, that is, if the parent element is set to overflow: hidden, our popup will be intercepted.

<ConfigProvider
  getPopupContainer={(triggerNode) => triggerNode.parentElement}
>
  <Drawer
    width={500}
    title='Title'
    open={open}
    destroyOnClose={true}
    rootClassName={"DrawerContainer"}
    rootStyle={{ zIndex: 9999 }}
    >
    <ProTable columns={columns} />
  </Drawer>
  <Button onClick={() => setOpen(true)}>open</Button>
</ConfigProvider>

Therefore, we are eager to find a way to better manage the z-index of the pop-up subcomponents in these pop-up containers.

Motivation

As mentioned above and mentioned #44958, We need all pop-up containers to provide their own z-index as a context to pass to the subcomponents, if the subcomponents is a pop-up interaction component, it will consume the context, get the parent container's z-index, And on the basis of the z-index of the parent container, add their own z-index to get the final level information.

Change list

Container(ContextProvider)

• Modal feat: Modal & Select support z-index context to manage z-index #45346
• Drawer feat: Drawer support z-index manager #45417
• Popover feat: Popover support z-index manager #45420
• Popconfirm feat: Popconfirm support z-index manager #45421
• Tooltip feat: Tooltip support z-index manager #45422
• Tour feat: Tour support z-index manager #45425

SubComponents(ContextConsumer)

• Select feat: Modal & Select support z-index context to manage z-index #45346
• Dropdown feat: z-index consumer #45457
• Cascader feat: z-index consumer #45457
• TreeSelect feat: z-index consumer #45457
• AutoComplete feat: z-index consumer #45457
• ColorPicker feat: z-index consumer #45457
• DatePicker feat: z-index consumer #45457
• TimePicker feat: z-index consumer #45457
• Menu feat: z-index consumer #45457

API

// config-provider/ZIndexContext.ts

const zIndexContext = React.createContext<number | undefined>(undefined);

export const ZIndexContextProvider = zIndexContext.Provider;

export default zIndexContext;

Example

// container
const modalZIndex = 1000;
<ZIndexContextProvider value={modalZIndex}>
	{/* ... */}
</ZIndexContextProvider>

// pop-up subcomponents
const selfZIndex = 500;
const { zIndex: containerZIndex } = useContext(zIndexContext) || {} as ZIndexContext;

const finalZIndex = containerZIndex + selfZIndex;

return (
  <RcSelect
        dropdownStyle={{
          zIndex: finalZIndex
        }}
  />
)

Detail

This change is not user-aware, and only antd needs to be changed, rc-components do not need to be changed.

[zombieJ]

For the popup part which should provider a algorithm with the offset calculation.

[kiner-tang]

Can you elaborate on what this algorithm does?