- Select基于rc-select,rc-select的下拉框基于rc-trigger,rc-trigger的下拉框定位基于第三方库dom-align,dom-align的overflow参数的adjustX、adjustY可以计算可视区域,在下拉框溢出可视区域的时候添加偏移量将位置放到可视区域中。
- 依赖链路dependency chain: Select.dropdownAlign => rc-select.dropdownAlign => rc-trigger.popupAlign => dom-align.alignConfig
- rc-select默认开启Y轴溢出位置调整,因此在可视空间不足时下拉框位置会自动上移,导致Select的输入框被遮挡
- 需要注意的是,默认情况是是可视空间,而不是所拥有的空间
- 未展开时: => 展开后,输入框被遮挡:
- 可以通过配置Select组件的dropdownAlign属性来覆盖默认的定位配置,截止今天该属性antd官网并没有说明文档,具体参数可参考dom-align:
dropdownAlign={{
overflow: {
adjustY: false // 关闭溢出位置调整
}
}}
配置前效果,此时下拉框错位:
配置后效果,此时只要下方还有空间就不会错位: