Range picker rendering in wrong position #6073
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.2.13
Environment
vue@3.2.41, chrome@106.0.5249.119, macOS@12.5.1
Reproduction link
Steps to reproduce
When the width of the component is large enough, click the end time input box, and the pop-up window will be rendered in the wrong position
组件宽度足够大时, 点击结束时间输入框, 弹窗渲染位置错误
// file: components/vc-picker/RangePicker.tsx
// line: 984
// panelDivRef and arrowRef cannot get offsetWidth in the early stage of component rendering
// 组件渲染初期 panelDivRef和arrowRef 无法获取offsetWidth
...
let arrowLeft = 0;
let panelLeft = 0;
if (
mergedActivePickerIndex.value &&
startInputDivRef.value &&
separatorRef.value &&
panelDivRef.value
) {
// Arrow offset
arrowLeft = startInputDivRef.value.offsetWidth + separatorRef.value.offsetWidth;
if (
panelDivRef.value.offsetWidth &&
arrowRef.value.offsetWidth &&
arrowLeft >
panelDivRef.value.offsetWidth -
arrowRef.value.offsetWidth -
(direction === 'rtl' || arrowRef.value.offsetLeft > arrowLeft
? 0
: arrowRef.value.offsetLeft)
) {
panelLeft = arrowLeft;
}
}
...What is expected?
The popup appears in the right place
弹窗出现在正确的位置上
What is actually happening?
wrong popup location
弹窗位置错误