Popover and Select

[plandem]

Is it possible to prevent the changing of visibility of popover after interaction with Select?

Here is demo:
http://codepen.io/anon/pen/XjBVbp?editors=0011

[afc163]

getPopupContainer https://ant.design/components/select/#Select-props

https://codepen.io/anon/pen/NaMbVg?editors=0011

You can use getPopupContainer={triggerNode => triggerNode.parentNode} to make select dropdown menu rendering inside the Popover content.

https://github.com/ant-design/ant-design/wiki/FAQ#select-dropdown-datepicker-timepicker-popover-popconfirm-will-scroll-with-page

#3487

[plandem]

Works! i would add this to official examples. Thanks.

[guohuihuiguo]

hello
我试着用上面的方法 getPopupContainer={(triggerNode: any) => triggerNode.parentNode} 结果

遮盖了select<Select getPopupContainer={(triggerNode: any) => triggerNode.parentNode} mode="multiple" notFoundContent={selectLoading ? <Spin size="small" /> : ``} filterOption={false} onSearch={this.totalFocusHandler.bind(this, siteCode)} style={{ width: '100%' }} > {siteCodeList.map((item: any, index: any) => <Option key={${item.sitecode}${index}} value={item.sitecode} >{item.sitecode}</Option>)} </Select>

[mix0000]

getPopupContainer https://ant.design/components/select/#Select-props

https://codepen.io/anon/pen/NaMbVg?editors=0011

You can use getPopupContainer={triggerNode => triggerNode.parentNode} to make select dropdown menu rendering inside the Popover content.

https://github.com/ant-design/ant-design/wiki/FAQ#select-dropdown-datepicker-timepicker-popover-popconfirm-will-scroll-with-page

#3487

Thats not work for Ant Date Pickers.

[krmao]

try to set position: relative; to the <DatePicker.RangePicker /> parent <div /> @mix0000

[mix0000]

try to set position: relative; to the <DatePicker.RangePicker /> parent

@mix0000

Okey I fix it!

Antd uses rc-picker which uses dom-align and they have options for positioning your element.

<DatePicker
  ....
  dropdownAlign={{
    points: ["tr", "br"]
  }}
  ....
/>

[lwh795]

Use getpopupcontainer = {triggernode = > triggernode. Parentnode} in the select in the modal. When the focus is obtained in IE 11,the whole modal will flash.

[lwh795]

使用 getpopupcontainer = {triggernode = > triggernode. Parentnode} 在模态中的选择中。在 IE 11 中获得焦点时，整个 modal 会闪烁。

For the same problem as this bug(#21039), I found a temporary solution from the comments

[chandpratik]

getPopupContainer https://ant.design/components/select/#Select-props
https://codepen.io/anon/pen/NaMbVg?editors=0011
You can use getPopupContainer={triggerNode => triggerNode.parentNode} to make select dropdown menu rendering inside the Popover content.
https://github.com/ant-design/ant-design/wiki/FAQ#select-dropdown-datepicker-timepicker-popover-popconfirm-will-scroll-with-page
#3487

Thats not work for Ant Date Pickers.

Try using getCalendarContainer={trigger => trigger.parentElement}