Recently we encountered an issue, saying that when contextHolder of Modal.useModal is placed in different positions, modal.confirm popup location will be different:
tsx
importReactfrom'react';
import{Button,Modal}from'antd';
exportdefault()=>{
const[modal, contextHolder]=Modal.useModal();
return(
<div>
<Modalopen>
<Button
onClick={()=>{
modal.confirm({ title:'Hello World'});
}}
>
Confirm
</Button>
{/* 🚨 BUG when put here */}
{contextHolder}
</Modal>
{/* ✅ Work as expect when put here */}
{/* {contextHolder} */}
</div>
);
};
Workable version:
Bug version:
From the figure above, we can see that when contextHolder is placed inside Modal, the pop-up position of the hooks call is incorrect.
Why?
antd's Modal internal calls the rc-dialog component library, which accepts a mousePosition attribute to control the pop-up position(Dialog/Content/index.tsx)：
The offset method is used to obtain the coordinate position of the form itself(util.ts)：
tsx
// pseudocode
functionoffset(el:Element){
const{ left, top }= el.getBoundingClientRect();
return{ left, top };
}
Through breakpoint debugging, we can find that the value of mousePosition is correct, but the value of rect obtained in offset is wrong:
json
{
"left":0,
"top":0,
"width":0,
"height":0
}
This value obviously means that the form component has not been added to the DOM tree at the animation start node, so we need to check the logic added by Dialog.
createPortal
rc-dialog creates a node in the document through rc-portal, and then renders the component to this node through ReactDOM.createPortal. For the different positions of contextHolder and different interactive, it can be speculated that there must be a problem with the timing of creating nodes in the document, so we can take a closer look at the part of adding nodes by default in rc-portal(useDom.tsx)：
Among them, queueCreate is obtained through context, the purpose is to prevent the situation that the child element is created before the parent element under the nesting level:
tsx
<Modaltitle="Hello 1"open>
<Modaltitle="Hello 2"open>
<Modal>
<Modal>
html
<!-- Child `useLayoutEffect` is run before parent. Which makes inject DOM before parent -->
<divdata-title="Hello 2"></div>
<divdata-title="Hello 1"></div>
Use queueCreate to add the append of the child element to the queue, and then use useLayoutEffect to execute:
Due to the above queue operation, the DOM of the portal will be triggered in the next useLayoutEffect under nesting. This causes the useLayoutEffect timing of the animation to start in rc-dialog after the node behavior is added, resulting in the element not being in the document and unable to obtain the correct coordinate information.
Since Modal is already enabled, it does not need to be executed asynchronously through queue, so we only need to add a judgment if it is enabled, and execute append directly:
