React + ANTD Select The position of the drop-down box varies with the page

<Select style={{width: 200}} getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
</Select>
Copy the code

According to the official Api, if the location is offset, add the getPopupContainer property to attach it to its parent, which is body by default

In the actual development, it was found that in some cases the parent node could not be found:

<div>
    <span>
        <Select  getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
            ...
        </Select>
    </span>
Copy the code

Suspecting that the Select component did not find the correct parent element, I defaulted to body, so I tried writing it differently

<Row>
    <span>
        <Select  getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}>
            ...
        </Select>
    </span>
</Row>
Copy the code

I replaced the outermost div with antD-specific Row components, and it worked

The summary is as follows:

Note two points to resolve the Select drop-down box offset problem:

1. Add the getPopupContainer property

2. The outermost element should be an ANTD component, not a normal div,span, etc

Solution 2

<div id='antdSelect'>
    <span>
        <Select  getPopupContainer={triggerNode => document.getElementById('antdSelect')}>
            ...
        </Select>
    </span>
Copy the code